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

一切正常。我在 wordpress 网站上使用 jQuery 1.6.2 和 jQuery masonry 。有一个实时demo here可以看到所有（不）工作。基本上它可以工作，但是这个类没有从div中删除的事实会立即重新打开div及其内容。我很不清楚它为什么不删除.expanded类。

编辑：我只是理解该文档加载时该类已存在。之后点击图片就会添加它，因此我认为我的删除问题来自于此。对于错误的解释感到抱歉。

Answer 1

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

在其中，您在.cunload元素上有一个点击处理程序。

由于.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

我认为它有效，但是你的脚本在点击关闭按钮后再次扩展了男孩。您应该将close事件处理函数的标题更改为：

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

这样相同的点击事件就不会冒泡文档层次结构。

.parents（）。removeClass（）不起作用

4 个答案: