javascript - 哪个 jQuery 代码更高效？

Question

出于好奇，下面哪个代码效率更高(如果两者都不是，最好的方法是什么？)

背景故事 - 构建一个小型图像轮播，所讨论的代码与控件(上一个、暂停/播放、下一个)有关

<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() 为每个 anchor 标记添加一个新事件。

.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
    }

}

注意:代码未经测试，阅读.delegate() jQuery 文档中的信息以获取更多信息。

也许你需要给 <ul> 添加一个 id :

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

希望对您有所帮助。