为什么我的简单jQuery无法正常工作？

Question

When the button with the class "edit-btn" is clicked I want the element on my page with the class "admin_account_hide" to fade in, and the element with class "admin_account_show" to remove.

Here is my HTML:

<form action="" method="post">
<div class="row-fluid admin-product admin-account-show loading-container" id="admin-2">
<div class="span3">admin</div>
<div class="span3">info@mydomain.com</div>
<div class="span3"> </div>
<div class="span3 admin-product-actions">
<button type="button" data-id="2" name="edit" class="btn btn-info edit-btn span6" title="Edit Account" value="Edit">Edit</button>
<button type="button" data-id="2" name="delete" class="btn delete-btn btn-danger span6" title="Delete Account" value="Delete">Delete</button>
</div>
</div>
<div class="row-fluid admin-product loading-container admin-account-hidden" id="admin-2">
<div class="span3"><input type="text" name="eusername" id="eusername" class="span12" value="admin"></div>
<div class="span3"><input type="text" name="eemail" id="eemail" class="span12" value="info@mydomain.com"></div>
<div class="span3"><input type="password" name="epassold" id="epassold" class="span12" placeholder="Old Password"><br>
                                    <input type="password" name="epassnew" id="epassnew" class="span12" placeholder="New Password"></div>
<div class="span3 admin-product-actions">
<button type="submit" data-id="2" name="save" class="btn btn-success edit-product span6" title="Save Changes" value="Save">Save</button>
<button type="button" data-id="2" name="cancel" class="btn delete-btn btn-danger span6" title="Cancel" value="Cancel" onclick="document.location.href='admin-accounts.php';">Cancel</button>
</div>
</div>
</form>

and my jQuery:

$(document).on('click', '.edit-btn', function() {

var $this = $(this);

setTimeout(function() {
    $this.closest('.admin-account-hide').fadeIn(250);
}, 1250);

setTimeout(function() {
    $this.find('.admin-account-show').remove();
}, 1510);

});

EDIT:

I have sorted the issue I had with mixing up the underscores with hyphens, that is now not an issue, and I have also tried setting the var $this to reference $(this), but my code still does not work.

Answer 1

您没有名为.admin_account_show或.admin_account_hide任何类，它们是.admin-account-show和.admin-account-hidden 。

Answer 2

"admin-account-show" is not the same class as "admin_account_show". replace your underscores with dashes and test it again.

Answer 3

Because this , in the callback you pass to setTimeout , is the window object. You should do this :

$(document).on('click', '.edit-btn', function() {
    var $this = $(this);
    setTimeout(function() {
      $this.parent('.admin_account_hide').fadeIn(250);
    }, 1250);

    setTimeout(function() {
      $this.find('.admin_account_show').remove();
    }, 1510);

});

Your queries seem also wrong (where's .admin_account_hide ?) but as you don't provide the whole relevant HTML (don't give more but a minimal example next time) it's hard to tell what would be the correct one.

Answer 4

Use .closest() instead of .parent() .Also use correct classnames in jQuery as mentioned in other answers.

Demo Fiddle

jQuery

$(document).on('click', '.edit-btn', function() {
    var $this = $(this);
setTimeout(function() {
    $('.admin-account-hidden').fadeIn(1000);
}, 1250);

setTimeout(function() {
    $this.closest('.admin-account-show').remove();
}, 1510);
});