jquery结合了类似的代码

时间:2011-10-10 20:39:47

标签: javascript jquery

我有很多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);
});

2 个答案:

答案 0 :(得分:2)

这应该做:

var elems = ["menu", "nav", "list"];
$.each(elems, function(i, elem){
    $("."+elem).live('click',function(){
        var value = $(this).html();
        $('#'+elem).html(value);
    });
});
  1. 创建元素列表。
  2. 使用$.each
  3. 循环播放
  4. 函数的第二个参数等于列表中的元素(menunav,..)

答案 1 :(得分: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);
});