jQuery快捷键/用于切换类的技术

Question

在jQuery中，是否有另外一种方法来编写它？

版本1

 $("#date_filter-enable").click(function() { 

     $("#search_dates").removeClass("hidden"); 
    }); 

    $("#date_filter-disable").click(function() { 

     $("#search_dates").addClass("hidden"); 
    }); 

2版

 $("input[id^=date_filter-]").click(function(e) { 

     var clicked = $(e.target); 
     var id = clicked.attr("id").split("-"); 
     var action = id[1]; 

     if(action == "enable") 
     $("#search_dates").removeClass("hidden"); 
     else 
     $("#search_dates").addClass("hidden"); 
    }); 

我已经习惯了编码这样......但我想知道是否有很多有效的，可读的，冷静的写作方式它...像切换，链接...最佳实践，我不知道^^

我很感谢你分享它！ ^^

Answer 1

您应该使用toggleClass方法。

$("input[id^=date_filter-]").click(function(e) { 
    $("#search_dates").toggleClass("hidden"); 
}); 

Answer 2

$("input[id^=date_filter-]").click(function(e) { 
     if($(this).attr("id").split("-")[1] == "enable") 
     $("#search_dates").removeClass("hidden"); 
     else 
     $("#search_dates").addClass("hidden"); 
    });