删除类并在单击元素时添加类

Question

jQuery is already working, what i want to achieve is that when title is clicked i want to remove the class of the i tag which is fa-toggle-off and replace it with fa-toggle-on. I already achieve this the problem is all of the i tag is affected.

 <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

You should narrow your selector:

var target = $('.header-details .toggle-h3-package i'); - this will find all i elements on the page. And you need only i that is in you clicked .toggle-h3-package . Use find method with this :

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

Also you can use toggleClass function without checking if element has some class:

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

Answer 2

This is what i did as you suggested..

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