哪個jQuery代碼更有效？

Question

出於好奇，以下哪個代碼更有效（如果不是，那么最好的方法是什么？）

Backstory - 構建一個小圖像輪播和有問題的代碼與控件（prev，pause / play，next）有關

<ul class="controls"> 
    <li> <a href="#" class="prev">  Previous Image </a> </li>
    <li> <a href="#" class="pause"> Pause          </a> </li>
    <li> <a href="#" class="next">  Next Image     </a> </li>
</ul>

// inside document.ready()
$(".controls a").click(function() {
    var cur_class = $(this).attr("class");

    if (cur_class == "pause") {
        // do something
    } else if (cur_class == "prev") {
        // do something
    } else if (cur_class == "next") {
        // do something
    }
)};

// OR THIS
$(".controls a.prev").click(function() { /* do something */ });
$(".controls a.pause").click(function() { /* do something */ });
$(".controls a.next").click(function() { /* do something */ });

謝謝M.

Answer 1

最好的選擇是使用.delegate() 。 它是一個新的事件添加到jQuery 1.4.2，它比使用點擊更好。

.click（）為每個錨標記添加一個新事件。

.delegate（） '等待'在添加新事件之前進行單擊（或指定的任何事件）（僅針對特定的單擊元素）。

$(".controls").delegate("a", "click", function() {

    var cur_class = $(this).attr("class");

    if (cur_class == "pause") {
        // do something
    } else if (cur_class == "prev") {
        // do something
    } else if (cur_class == "next") {
        // do something
    }

}

注意：代碼未經過測試，請閱讀jQuery文檔中的.delegate（）信息以獲取更多信息。

也許你需要在<ul>添加一個id：

（ <ul class="controls" id="ul_id"> ）然后使用$("#ul_id").delegate("a", "click", function() { / ... } 。

希望有所幫助。

Answer 2

幾乎沒有區別。 當您構建旋轉木馬時 ，最大的瓶頸就是您加載的圖像。

Answer 3

我認為以下是最快的方法。 它只獲取一次DOM節點列表並過濾它而不是三次獲取它

$('.controls a')
.filter('.prev')
.click(function(){/*...*/})
.end()
.filter('.pause')
.click(function(){/*...*/})
.end()
.filter('.next')
.click(function(){/*...*/});