Question

当按钮上带有＆＃34; edit-btn＆＃34;单击我想要我的页面上的元素＆＃34; admin_account_hide＆＃34;淡入淡出，和类＃34; admin_account_show＆＃34;删除。

这是我的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>

和我的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);

});

编辑：

我已经将下划线与连字符混合的问题排序，现在不是问题，我也尝试将var $ this设置为引用$（this），但我的代码仍然不起作用。

Answer 1

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

Answer 2

“admin-account-show”与“admin_account_show”不是同一类。用破折号替换下划线并再次测试。

Answer 3

因为this在您传递给setTimeout的回调中是window对象。你应该这样做：

$(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);

});

您的查询似乎也是错误的（其中.admin_account_hide？）但是由于您没有提供完整的相关HTML（下次没有提供更多但最简单的示例），很难说出什么是正确的。

Answer 4

使用.closest()代替.parent()。也可以在jQuery中使用正确的类名，如其他答案中所述。

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);
});

为什么我的简单jQuery不起作用？

4 个答案:

Demo Fiddle