Как удалить класс, прежде чем покинуть элемент в JQuery

Question

Я хочу, чтобы разработать некоторые списки в Bootstrap 3.

Я использовал этот код для что-

HTML-

<ul class="list-group"> 
    <li class="list-group-item"> 
     <div> 
      <div> 
       Anything <img id="image_click" src="http://www.neatimage.com/im/lin_logo.gif"> 
      </div> 
      <div> 
       More thing 
      </div> 
     </div> 
    </li> 
    <li class="list-group-item">Documents</li>   
    <li class="list-group-item">Music</li> 
    <li class="list-group-item">Videos</li> 
</ul> 

CSS-

.list_selected 
{ 
    background: #AFAF93 !important; 
} 

JavaScript с использованием jQuery-

//Selected 
    var previous_selected; 
    $("li.list-group-item").click(function() 
    { 
     try 
     { 
      previous_selected.removeClass("list_hover"); 
     } 
     catch(e) 
     { 
      console.log(e); 
     } 
     $(this).addClass("list_selected"); 
     previous_selected=$(this); 
    }); 
//End 

Так что у меня есть выход, как IT-

После нажатия на второй item-

.

И после того, как нажали на 3 пункта после того, что-

Но я получаю выход, как IT-

.

Итак, ранее выбранный тег элемента не удален отлично.

Помогите пожалуйста?

Заранее благодарим за помощь.

Answer 1

Вы удаляете неправильный класс от предыдущего элемента

var previous_selected; 
$("li.list-group-item").click(function() { 
    if(previous_selected){ 
     previous_selected.removeClass("list_selected"); 
    } 
    $(this).addClass("list_selected"); 
    previous_selected = $(this); 
}); 

---

Если все эти целевые li элементы являются братьями и сестрами, то вы можете использовать

var $items = $("li.list-group-item").click(function() { 
    $(this).addClass("list_selected").siblings('.list_selected').removeClass("list_selected"); 
}); 

Answer 2

Попробуйте это.

$("li.list-group-item").click(function() 
    { 
    if($('.list-group-item').hasClass('list_selected')){ 
     $('.list-group-item').removeClass('list_selected'); 
    } 
    $(this).addClass('list_selected'); 
});