Question

我有一个像这样的项目列表

<div id="items">

<figure>
<img>
<figcaption>
</figcaption>
</figure>

</div>

点击图中我使用代码切换一个'figover'类来显示一些信息

$('figure').on('click', function () {
$('figcaption').removeClass('figover');
$(this).closest('figure').find('figcaption').toggleClass('figover');        
});

这适用于一件事。当点击一个项目并显示信息时，它会切换到figover。单击另一个项目时，将从旧项目中删除figover并在新项目中切换。但是如果我点击figover切换的项目，则不会移除figover。

Answer 1

您需要在从所有figure中移除课程时过滤掉当前点击的figcaption元素子figcaption。试试这个：

$('figure').on('click', function () {
 $('figcaption').not($(this).closest('figure').find('figcaption')).removeClass('figover');
 $(this).closest('figure').find('figcaption').toggleClass('figover');        
});

Answer 2

问题是因为removeClass上使用的选择器会对所有figcaption元素（当前元素也是子元素）起作用。

您可以从removeClass中使用的选择器中排除当前元素子项并切换其类;以这种方式，所有其他的occorunces都从removeClass中移除，当前元素切换类（通过添加或删除它上面的类）。

代码：

$('figure').on('click', function () {
    var $curCap=$(this).closest('figure').find('figcaption');
    $('figcaption').not($curCap).removeClass('figover');
    $curCap.toggleClass('figover');
});

演示：http://jsfiddle.net/T5B3f/

最近的jquery toggleclass

2 个答案: