удалить класс и добавить класс при щелчке элемента

Question

jQuery уже работает, чего я хочу достичь, так это то, что когда заголовок нажал, я хочу удалить класс тега i, который является fa-toggle-off и заменить он с fa-toggle-on. Я уже достигаю этого, проблема в влияет на все теги i.

<div class="row package-row"> 
     <div class="global-switch"> 
      <input type="checkbox" id="switch1" name="switch1" class="switch" /> 
      <label for="switch1">Hide Packages</label> 
     </div><!--end of global-switch--> 
     <div class="col-md-12"> 
      <div class="header-details"> 
        <h3 id="toggle-h3-package"><i class="fa fa-toggle-off" style="margin-right: 10px;"></i>TITLE</h3> 
        <p>DESCRIPTION</p> 
      </div> 
      <div class="global-control" id="global-control"> 
        CONTENT 
      </div> 
     </div>    
</div> 

JQuery

$('.toggle-h3-package').click(function(){ 
       $(this).parent().next('.global-control').animate({ 
        height:'toggle', 
        opacity:'toggle' 
       },{ 
        duration: 5000, 
        specialEasing: { 
         width: "linear", 
         height: "easeOutBounce" 
        } 
       }); 
      }); 
      $('.toggle-h3-package').click(function() { 
       var target = $('.header-details .toggle-h3-package i'); 

       if (target.hasClass('fa-toggle-off')) { 
        $('.header-details .toggle-h3-package i').removeClass('fa-toggle-off').addClass('fa-toggle-on'); 
       } 
       else { 
        $('.header-details .toggle-h3-package i').removeClass('fa-toggle-on').addClass('fa-toggle-off'); 
       } 
      }); 

Answer 1

Вы должны сузить свой селектор:

var target = $('.header-details .toggle-h3-package i'); - это найти все i элементы на странице. И вам нужно только i, который находится в вас нажал .toggle-h3-package. Используйте find метод с this:

$('.toggle-h3-package').click(function() { 
    var target = $(this).find('i'); 
    // your code here 

Также вы можете использовать функцию toggleClass без проверки, если элемент имеет класс:

target.toggleClass('fa-toggle-on fa-toggle-off'); 

Answer 2

Это то, что я сделал, как вы предложили ..

$('.toggle-h3-package').click(function() { 
        var target = $(this).find('i'); 
         target.toggleClass('fa-toggle-on fa-toggle-off'); 
       });