JQuery класс не удаляется

Question

Я использую этот JQuery фрагмент кода, чтобы показать/скрыть содержимое при нажатии ссылки ..

jQuery(document).ready(function() { 
    jQuery('.showSingle').on('click', function() { 
    jQuery(this).addClass('selected').siblings().removeClass('selected'); 
    jQuery('.targetDiv').hide(); 
    var selector = '#div' + jQuery(this).data('target'); 
    jQuery(selector).show(); 
    }); 
}); 

http://jsfiddle.net/W4Km8/7947/

По какой-то причине выбранный класс не удаляется, когда другой нажимается ссылка, где я ошибаюсь?

Answer 1

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

Вы должны использовать (для HTML)

jQuery(this).addClass('selected') 
      .closest('.p_link') 
      .siblings() 
      .find('.showSingle') 
      .removeClass('selected'); 

Демо на http://jsfiddle.net/W4Km8/7951/

---

Но это все еще не работает отлично на вашей структуре, поскольку она не соответствует. (он не будет работать на первой линии, потому что .p_link вложен в еще одной div, чем другие)

Альтернативный (для этой Adhoc структуры) может быть

jQuery('.showSingle.selected').removeClass('selected'); 
jQUery(this).addClass('selected'); 

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

Answer 2

Вы можете использовать это также двумя изменениями в вашем коде: Найти «ближайший» div из класса «.showSingle» 1st change: Изменить первую строку HTML

<div class="col-md-4 p_link"> 

<a class="showSingle" data-target="1"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam iaculis orci id nulla aliquet fermentum. Suspendisse ultrices nulla id magna cursus blandit. 
</a> 

</div> 

<div class="col-md-4 p_link"> 
<a class="showSingle" data-target="2">Sed feugiat fringilla lacus, quis aliquam turpis cursus eu. In dignissim ultrices tellus in convallis. Sed euismod tellus vel lorem</a> 
</div> 

второй Изменение: третья строка кода JS скрипт

jQuery(document).ready(function() { 
jQuery('.showSingle').on('click', function() { 
     jQuery(this).closest('div').addClass('selected').siblings().removeClass('selected'); 
jQuery('.targetDiv').hide(); 
var selector = '#div' + jQuery(this).data('target'); 
jQuery(selector).show(); 
}); 
});