如何改進這個jQuery代碼？

$(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，設置當前點擊元素活動。我想知道是否有在功能改善此問題的方法：如何改進這個jQuery代碼？

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

如何不重複jQuery選擇$("#available_job_types .job_type_btn")？

來源

2013-08-27 qichunren

這個問題似乎是脫離主題，因爲它將不會幫助任何用戶在未來，而且是關於代碼審查。在codereview.stackexchange.com上提問可能會更好。 –

非常感謝。我下次不會這樣做。 – qichunren

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

    }); 
});

來源

2013-08-27 05:40:38

嘗試

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

來源

2013-08-27 05:41:02

-1

您可以刪除重複的查詢選擇$（「＃available_job_types .job_type_btn」）如下，它是更好地使用 '綁定'

，並沒有必要提及css類名稱當您刪除css類

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

來源

2013-08-27 05:50:03 Udara

你能告訴我爲什麼「綁定點擊」更好？ – qichunren

http://stackoverflow.com/questions/11429089/is-bind-or-click-better-to-bind-a-click-event-handler – Udara

我相信你正試圖刪除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(); 
    } 
});

上面的代碼爲您提供了更好的性能，也是情理之中。 :)

來源

2013-08-27 06:02:31

如何改進這個jQuery代碼？

回答

相關問題