Блог

У меня есть список элементов, подобных этому

 <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 не будет удален.

Вам нужно отфильтровать текущие дочерние figure элементы, на которые вы нажали, figcaption удаляя класс из всех figcaption . попробуйте это:

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

Проблема заключается в том, что селектор, используемый в removeClass , действует на все элементы figcaption (также на дочерние элементы текущего элемента).

Вы можете исключить текущий дочерний элемент из селектора, используемого из removeClass , и переключить его класс; таким образом, все другие вхождения удаляются из removeClass , а текущий элемент переключает класс (путем добавления или удаления класса в нем).

Код:

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

Демонстрация:http://jsfiddle.net/T5B3f /