哪个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()信息以获取更多信息.

也许你需要为以下内容添加一个id <ul>:

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

希望有所帮助.