按钮单击时添加和删除css类

Question

我正在使用此代码在我的html页面中显示和隐藏侧边栏

$(document).ready(function(){

       $('button.rside').click(function(){
               $( "#all-labels" ).removeClass( "side-click" );
               $( ".box" ).removeClass( "box-side" );
               $(this).removeClass( "rside" );
               $(this).addClass( "side" );
          });
       $('button.side').click(function(){
               $( "#all-labels" ).addClass( "side-click" );
               $( ".box" ).addClass( "box-side" );
                $(this).addClass( "rside" );
                $(this).removeClass( "side" );
          });
     });

当我点击按钮，添加新类并使用rside重新启动按钮类侧时，此代码运行良好，按下新按钮类的相同代码，以便将所有元素返回到正常位置不起作用。

Answer 1

您需要事件委托。使用.on()：

 $(document).on('click','button.rside',function(){
           $( "#all-labels" ).removeClass( "side-click" );
           $( ".box" ).removeClass( "box-side" );
           $(this).removeClass( "rside" );
           $(this).addClass( "side" );
      });
 $(document).on('click','button.side',function(){ 
           $( "#all-labels" ).addClass( "side-click" );
           $( ".box" ).addClass( "box-side" );
            $(this).addClass( "rside" );
            $(this).removeClass( "side" );
      });

Answer 2

您可以使用event delegation并使用toggleClass()缩短您的代码：

$(document).ready(function(){
    $(document).on('click','button.rside',function(){
        $("#all-labels").toggleClass("side-click");
        $(".box").toggleClass("box-side");
        $(this).toggleClass( "rside side" );
    });
});

Answer 3

试试这个：

$(document).ready(function(){

   $('button.rside').live("click",function(){
           $( "#all-labels" ).removeClass( "side-click" );
           $( ".box" ).removeClass( "box-side" );
           $(this).removeClass( "rside" );
           $(this).addClass( "side" );
      });
   $('button.side').live("click",function(){
           $( "#all-labels" ).addClass( "side-click" );
           $( ".box" ).addClass( "box-side" );
           $(this).addClass( "rside" );
           $(this).removeClass( "side" );
      });
 });

或

  $( document ).delegate( "button.rside", "click",function(){
           $( "#all-labels" ).removeClass( "side-click" );
           $( ".box" ).removeClass( "box-side" );
           $(this).removeClass( "rside" );
           $(this).addClass( "side" );
      });
   $( document ).delegate( "button.side", "click",function(){
           $( "#all-labels" ).addClass( "side-click" );
           $( ".box" ).addClass( "box-side" );
           $(this).addClass( "rside" );
           $(this).removeClass( "side" );
      });

Answer 4

尝试使用.toggleClass()进行事件委派，而不是将其缩短：

$(document).ready(function(){
   $(document).on('click', 'button.side, button.rside', function(){
       $( "#all-labels" ).toggleClass( "side-click" );
       $( ".box" ).toggleClass( "box-side" );
       $(this).toggleClass( "rside side" );
   });
});

您可以使用最接近的静态父ID＆className替换点击事件中的$(document)。