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();

    });
});

我将'click'事件监听器添加到#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");
    });

如何改进这个jquery代码？

4 个答案: