.parents(). removeclass()不起作用

Question

我得到了这个javascript，试图删除父元素上的类:

$(this).parents(".box").removeClass("expanded");

在此html:

<div class="box trx">
<a href="javascript:;" class="open-content"><?php the_post_thumbnail('thumbnail'); ?></a>
<div class="expandable">
    <?php the_content(); ?>
    <span class="simple">
        <a class="cunload" href="javascript:;">Close</a>
    </span>
</div>
</div>

不幸的是，到目前为止这还不起作用。我做了几个测试，如:

$(this).parents(".box").removeClass("trx");

和

$(this).parents(".box").addClass("exd");

这一切都行得通。我使用jQuery 1.6.2和jQuery砌体在一个wordpress网站。这里有一个实时的演示，可以看到它全部(不)工作。基本上它工作，但事实是，类没有从div中删除，并立即重新打开div及其内容。我很困惑为什么它不删除.expanded类。

编辑:我刚刚明白，当文档被加载时，类还在那里。它是在点击图片后添加的，因此我认为我的删除问题来自于此。

Answer 1

在.box元素上有一个单击处理程序。

在.cunload元素上有一个click处理程序。

由于.cunload嵌套在.box中，当您按下close按钮时，两个元素都会收到单击事件，因此它会重新打开。(由于事件冒泡DOM层次)

将.cunload处理程序更改为

$('.cunload').click(function(e){
            e.stopPropagation();
            restoreBoxes();
            $(this).parents(".box").removeClass("expanded");
});

Answer 2

也许这行得通:

$(this).parents(".box").filter(".expanded").removeClass("expanded");

Answer 3

如果我使用下面的代码:

$(".cunload").click(function() {
    $(this).parents(".box").removeClass("trx");
});

与此HTML:

<div class="box trx">
<div class="expandable">
    <span class="simple">
        <a class="cunload" href="#">Close</a>
    </span>
</div>
</div>

然后，它似乎完全按照设计工作，你可以在这里看到它的工作:http://jsfiddle.net/jfriend00/Djjuz/。点击关闭链接，可以看到当trx类被移除时，背景颜色发生了变化。

所以，在你的代码中一定有一些你没有透露的东西使它不起作用。请包括你用来触发函数的确切代码，也许可以更好地解释你正在尝试做什么，以及你观察到发生了什么或没有发生什么。

如果你希望我们使用到工作页面的链接，请描述相关代码在哪里(有很多JS文件在该页)，并描述你点击什么，你期望的结果是什么。到目前为止，你只是告诉我们有些东西不工作，但没有给我们足够的背景来弄清楚到底是什么不工作，你用什么代码来触发它，以及我们如何可能重现问题或自己看到问题。如果你需要高质量的帮助，你必须给我们足够的信息来帮助自己。

另外，您是否意识到，当您将选择器传递给.parents("selector")方法时，它将操作限制为仅匹配该选择器的父操作?因此，.parents(".box")将只操作具有class"box"的父对象。

Answer 4

我认为它的工作，但你的脚本扩展男孩再次点击关闭按钮后。您应该将关闭事件处理程序函数的头更改为:

function(event) {
    event.stopPropagation();
    [...]

使相同的单击事件不会在文档层次结构中冒泡。