Question

我有很多jquery点击功能，它们非常相似，如何将它们组合起来用于更短的代码。（使用regex或使用array foreach？）

$(".menu").live('click', function() {
    var value = $(this).html();
    $('#menu').html(value);
});

$(".nav").live('click', function() {
    var value = $(this).html();
    $('#nav').html(value);
});

$(".list").live('click', function() {
    var value = $(this).html();
    $('#list').html(value);
});

Answer 1

这应该做：

var elems = ["menu", "nav", "list"];
$.each(elems, function(i, elem){
    $("."+elem).live('click',function(){
        var value = $(this).html();
        $('#'+elem).html(value);
    });
});

创建元素列表。
使用$.each
函数的第二个参数等于列表中的元素（menu，nav，..）

Answer 2

Rob的回答肯定是值得投票的，但我只是想说有时候你想要限制两个元素之间的任意连接。为什么元素X的类必须与元素Y的ID同名？这是非常随意的，可能是人们后来弄清楚的麻烦。

你可以这样做，以使其更健壮：

<a href="#" class="foo" data-your-data-attr="alice">alice</a>
<a href="#" class="foo" data-your-data-attr="bob">bob</a>
<a href="#" class="foo" data-your-data-attr="sue">sue</a>

现在你的JS变得超级简单直接：

$(".foo").live('click',function(){
    var value = $(this).html();
    var yourDataAttr= $(this).data('yourDataAttr');
    $('#' + yourDataAttr).html(value);
});

jquery结合了类似的代码

2 个答案: