Question

我将以下行绑定到click事件：

$(this).parents(".addonoptions").children().removeClass("highlight");

它应该从父母的孩子中剥离“突出显示”类。但它没有做任何事情。

如果我将其更改为：

$(this).parents(".addonoptions").children().addClass("highlight");

然后将突出显示类成功添加到所有子项。同样，如果我将“removeClass”更改为“hide（）”，那么所选元素的隐藏就好了，所以我知道正在选择正确的元素。我已经阅读了许多关于removeClass不起作用的其他问题和答案，但没有一个答案似乎在这种情况下有效。

以下是HTML的基本示例，其中“clickme”类与上述事件相关联。

<div class="addonoptions">
<div><p class="clickme">Click to remove highlights</p></div>
<div class="highlight"><p class="clickme">Click to remove highlights</p></div>
</div>

Answer 1

children仅查找直接子节点（在本例中为<div>而不是<p>标记，而是使用find。

直播示例 - http://jsfiddle.net/sKz6y/

Answer 2

如果$(this)是<p>标记，则children()调用将返回<div> s的集合。您需要使用jQuery的find方法：

尝试：

$(this).parents(".addonoptions").find('p').removeClass("highlight");

http://api.jquery.com/children/

http://api.jquery.com/find/

<div class="addonoptions">
    <div>
        <p class="clickme">Click to remove highlights</p>
    </div>
    <div class="highlight">
        <p class="clickme">Click to remove highlights</p>
    </div>
</div>

$('.clickme').on('click', function(){
    $(this).parents('.addonoptions').children().removeClass('highlight');
    $(this).parent().addClass('highlight');
});

http://jsfiddle.net/E4K7P/

Answer 3

您只需在类本身上调用removeClass即可真正简化删除：

DEMO：http://jsfiddle.net/hwxj9/

$('.clickme').click(function() {
    /* remove highlight class*/
    $('div.highlight').removeClass('highlight');
    /* or if class exists in other parts of page
       $(this).closest('.addonoptions').find('div.highlight').removeClass('highlight');

     */
    /* highlight parent of p */
    $(this).parent().addClass('highlight');

})

addClass和其他工作时忽略removeClass

3 个答案: