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 */ });

谢谢你。

Answer 1

最佳选择是使用.delegate()。它是一个添加到jQuery 1.4.2的新事件，它比使用click更好。

.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

几乎没有区别。当您构建 carousel 时，最大的瓶颈就是您加载的图像。

Answer 3

我认为以下是最快的方法。它只获取一次DOM节点列表并过滤它而不是三次获取

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

哪个jQuery代码更有效？

3 个答案: