Alternate для Тумблера в JQuery

Question

DEMO

Что Iam пытается достичь ... Если пользователь нажимает на 1-й элементе списка, - фон добавляется Если пользователь СНОВА кликов по тому же элементу списка - фон должен быть удален

который не происходит. может кто-то PLZ посмотреть на это .. Я попытался toggleClass, но его не работает ..

Спасибо!

ageUrl = ""; 

$('.ageUrl li a').on('click', function(e){ 
    e.preventDefault(); 
    ageUrl = $(this).attr("href"); 

    if($(this).hasClass('selectedBg')){ 
     $('.ageUrl li, .ageUrl li a').removeClass('selectedBg'); 
    } 
    else { 
     //$(this).addClass('selectedBg'); 

     $('.ageUrl li, .ageUrl li a').removeClass('selectedBg'); 
     $(this).closest('li').addClass('selectedBg'); 
     //$(this).closest('li').toggleClass('selectedBg') 
     console.log(ageUrl); 
    } 
}); 

$('.crossIconSel').on('click', function(){ 
    alert('hi'); 
    $('.ageUrl li, .ageUrl li a').removeClass('selectedBg, crossIconSel'); 
}); 

Answer 1

Demo Fiddle Попробуйте один

$('.ageUrl li a').on('click', function(e){ 
      e.preventDefault(); 
      ageUrl = $(this).attr("href"); 

      if($(this).parent('li').hasClass('selectedBg')){ 
       $('.ageUrl li, .ageUrl li a').removeClass('selectedBg'); 
      } 
      else { 
       //$(this).addClass('selectedBg'); 

       $('.ageUrl li, .ageUrl li a').removeClass('selectedBg'); 
       $(this).closest('li').addClass('selectedBg'); 
       //$(this).closest('li').toggleClass('selectedBg') 
       console.log(ageUrl); 
      } 
     }); 

     $('.crossIconSel').on('click', function(){ 
      alert('hi'); 
      $('.ageUrl li, .ageUrl li a').removeClass('selectedBg, crossIconSel'); 
     }); 

Answer 2

Ваше if состояние было не так, как вы проверяли на a элемент, он имеет класс SelectedBg, тогда как вы применили класс на .closest(li):

Просто сделайте if состояние примерно:

if ($(this).closest('li').hasClass('selectedBg')) { 
    $('.ageUrl li, .ageUrl li a').removeClass('selectedBg'); 
} 

Working Demo

Answer 3

Смотрите, если это работает

Jquery

$('.ageUrl li a').on('click', function (e) { 
      e.preventDefault(); 
      $('.ageUrl li a').not(this).removeClass('selectedBg'); 
      if($(this).hasClass('selectedBg')){ 
       $(this).removeClass('selectedBg'); 
      } 
      else{ 
       $(this).addClass('selectedBg'); 
      } 
     }); 

Рабочий код ->JSFIDDLE