добавить/удалить класс из элемента списка

Question

У меня есть элементы списка, отображаемые с помощью цикла PHP. Я хочу добавить класс к элементу списка, который был нажат, а затем удалить класс из этого элемента и добавить его к следующему элементу, который щелкнул или щелкнул где-либо еще.

Я попытался:

$j('.list_item').on("click", function() { 

     $j(this).addClass("active_card"); 

    }).on("blur", function() { 

     $j(this).removeClass("active_card"); 

}); 

Он добавляет класс, но не удаляет его при нажатии на другой предмет.

HTML: Мне жаль, эти элементы списка arent, как упоминалось ранее, но все еще отображаются внутри петли php.

<div id="item_list_wrapper"> 
<div class="list_item">...</div> 
<div class="list_item">...</div> 
<div class="list_item">...</div> 
<div class="list_item">...</div> 
</div> 

Answer 1

В зависимости от того, что нажал, он не будет фокусироваться и не будет вызывать событие размытия. Вам лучше использовать селектор классов для получения элемента.

$j('.item_list').on('click', function() { 
    $j('.active_card').removeClass('active_card'); 
    $j(this).addClass('active_card'); 
}); 

Answer 2

Я думаю, что это поможет вам, что вы хотите:

http://jsfiddle.net/S7EK9/

$j('.item_list').on("click", function (e) { 
    $j('.active_card').removeClass('active_card'); 
    $j(this).addClass("active_card"); 
    e.stopPropagation(); 
}) 

$j(document).on('click', function() { 
    $j('.active_card').removeClass('active_card'); 
}); 

Если нажать на одну из ваших .item_list элементов, которые будут выделены. Если вы щелкните в другом месте, класс active_card будет удален.