jquery - 如何改进这个 jquery 代码？

Question

$(function(){

    $("#available_job_types .job_type_btn").click(function(e){
        $("#available_job_types .job_type_btn").removeClass("active");
        _this = $(this);
        _this.addClass("active");
        e.preventDefault();

    });
});

我将“单击”事件侦听器添加到#available_job_types .job_type_btn，在当前单击的元素上设置为活动状态。我想知道是否有办法在函数中改进这一点：

$("#available_job_types .job_type_btn").removeClass("active");

如何不重复 jquery 选择器$("#available_job_types .job_type_btn")？

Answer 1

$(function(){

var $btn=  $("#available_job_types .job_type_btn");
    $btn.click(function(e){
       $btn.removeClass("active");
        _this = $(this); // if you use one time this then there is no need to make an variable to store $(this)
        _this.addClass("active");
        e.preventDefault();

    });
});

Answer 2

尝试

$(function(){
    var $job_type_btns = $("#available_job_types .job_type_btn").click(function(e){
        $job_type_btns.removeClass("active");
        $(this).addClass("active");
        e.preventDefault();
    });
});

Answer 3

我确定您正在尝试从先前单击active的元素中删除该类。如果是这样，那么为什么不将前一个元素存储在函数对象本身中并在下次单击时将其删除，而不是从所有元素中删除该类？active

像这样的东西：

以下代码未经测试（仅用于逻辑）

$(function(){
    $("#available_job_types .job_type_btn").click(jobType);  //calls jobType function

    function jobType(e){
        if(jobType.prevEl){  //checks if the click function is called before
            $(jobType.prevEl).removeClass("active");    //removing the class from the previously clicked element.
        }        
        _this = $(this);
        _this.addClass("active");
        jobType.prevEl = _this;  // storing the current clicked element as previous clicked element (being ready for next click)
        e.preventDefault();
    }
});

上面的代码给你更好的性能，也很有意义。:)

Answer 4

您可以删除重复查询选择器 $("#available_job_types .job_type_btn") 如下，最好使用'bind'

删除 css 类时无需提及 css 类名

 var element = $("#available_job_types .job_type_btn");
    element.bind('click', function () {
        element.removeClass();
        element.addClass("active");
    });