问题描述:

I'm trying to shake my login form on the basis of a variable, which is empty if the login credentials are correct. This variable is msg.

Now if you see this jsfiddle example (test by clicking on Run, it will shake), it works fine but if I try to use in my application then it gives error as $this is not defined in line $this.css({.

I have written $(this).css({ in my code but the console shows error with $this.css({.

Note that it does not have to do anything with the variable because I'm getting the variable from server side like when the user fills wrong credentials $message is non empty. I've checked this condition using the alert box.

I'm using jQuery 1.7 in my application.

Code used in my app is:

<html>

<head>

<title>Test</title>

<meta http-equiv="Content-Type" content="text/html;">

<script type="text/javascript" src="xyz/js/jquery.js"></script>

<script type="text/javascript">

$(function() {

$("input:text:visible:first").focus();

var msg = "$message"

if (msg.length!==0){

alert("message is not empty");

jQuery.fn.shake = function(intShakes, intDistance, intDuration) {

this.each(function() {

$(this).css({

position: "relative"

});

for (var x = 1; x <= intShakes; x++) {

$(this).animate({

left: (intDistance * -1)

}, (((intDuration / intShakes) / 4))).animate({

left: intDistance

}, ((intDuration / intShakes) / 2)).animate({

left: 0

}, (((intDuration / intShakes) / 4)));

}

});

return this;

};

$('#login').shake(2, 13, 250); } });</script>

</head>

<body class="login login-action-login wp-core-ui">

<div id="wrapper">

<div id="login">

<form name="form_login1" action="$action" method="post">

<input type="hidden" name="command" value="login">

<p><label>Username<br>

<if condition="enable_password_cookie">

<input type="text" name="login2" value="$login_from_password_cookie" onchange="document.form_login2.login.value = this.value" id="user_login" class="input" size="20" tabindex="1">

</if>

<else>

<input type="text" id="user_login" class="input" name="login2" size="20" onchange="document.form_login2.login.value = this.value">

</else>

</label></p>

</form>

<form name="form_login2" action="$action" method="post">

<input type="hidden" name="login">

<input type="hidden" name="command" value="login">

<input type="hidden" name="extra_param" value="$extra_param">

<p>

<label>Password

<input type="password" name="password" is="password" id="password" class="input" value="" size="20">

</label>

</p>

<p class="submit">

<input type="submit" value="Login" onclick="javascript:submit_login();" id="wp-submit" class="button button-primary button-large">

</p><br><br>

<p class="error">$message</p>

</div><br>

</form>

</div>

</div>

</html>

PS: I've tried cleaning cache, but still I get this error: http://i.imgur.com/TNBgQM8.png

EDIT 2: I've cleaned cache and all the browser data but still I can see that it's changing $(this).css to $this.css. I don't get why? :/

网友答案:

1) this in your case is not jquery object. Use $(this)

2) Update cache of your application if browser shows code different from what you have in actual directory.

3) what you see in your browser debugger is actual code your browser getting. If you're sure that the code with $this instead of $(this) is actual code, just replace $this with $(this)

网友答案:

roasted's comment solved my problem.

I had to change $(this) to $( this ).

相关阅读:
Top