Jquery组合类似代码

jquery combine similar code

本文关键字：代码 组合 Jquery      更新时间：2023-09-26

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

应该这样做:

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. 函数的第二个参数等于列表中的元素(menu, nav，…)

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);
});
相关文章：