Question

我有以下jquery函数，你可以在this code pen中找到我想要简化的函数。

我想通过编写一个创建以下所有函数的函数来更简洁地编写下面的javascript，因为唯一的区别是以下字符串：name1，name2，name3等。

的Javascript

$('#name1').on('click', function(){
    document.getElementById("name1").innerHTML = "name1";
    });
$('#name2').on('click', function(){
    document.getElementById("name2").innerHTML = "name2";
    });
$('#name3').on('click', function(){
    document.getElementById("name3").innerHTML = "name3";
    });
$('#name4').on('click', function(){
    document.getElementById("name4").innerHTML = "name4";
    });
$('#name5').on('click', function(){
    document.getElementById("name5").innerHTML = "name5";
    });
$('#name6').on('click', function(){
    document.getElementById("name6").innerHTML = "name6";
    });

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<button type="button" id="name1">NAME</button>
<button type="button" id="name2">NAME</button>
<button type="button" id="name3">NAME</button>
<button type="button" id="name4">NAME</button>
<button type="button" id="name5">NAME</button>
<button type="button" id="name6">NAME</button>

Answer 1

我认为这是最简单的解决方案：

$('button').on('click', function() {
  $(this).html($(this).attr('id'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="name1">NAME</button>
<button type="button" id="name2">NAME</button>
<button type="button" id="name3">NAME</button>
<button type="button" id="name4">NAME</button>
<button type="button" id="name5">NAME</button>
<button type="button" id="name6">NAME</button>

如果您希望此功能适用于特定按钮，则可以使用$('#name1,#name2,#name3...').on 如果他们都有特定课程，您可以使用$('.specific-class').on 如果它们都存在于某个特定元素中，您可以使用$('div#id1 button').on
等等...

Answer 2

您定位了网页上的每个button，因此选择器可以更简单：

$('button').on('click', function(){
    //
});

您正在设置＆＃34;当前点击的元素＆＃34;到它的id的值，这可能更通用：

$('button').on('click', function(){
    this.innerText = this.id;
});

注意：如果此选择器过度简单（您不想在页面上定位每个 button），您仍然可以使用id值的原始列表作为单个选择器。也许是这样的事情：

$('button[id^="name"]').on('click', function(){
    this.innerText = this.id;
});

甚至：

$('#name1, #name2, #name3, #name4, #name5, #name6').on('click', function(){
    this.innerText = this.id;
});

有时，将点击处理程序分配给单个父元素也是合适的，尤其是在可能存在多个匹配元素的情况下。像这样：

$(document).on('click', '#name1, #name2, #name3, #name4, #name5, #name6', function(){
    this.innerText = this.id;
});

这里的区别在于，不是将处理函数分配给每个匹配元素，而是只为document和目标button的选择器分配一个处理函数。在执行该处理程序时，会动态评估元素。

Answer 3

将你的jQuery压缩到这个：

$('button[id^="name"]').on('click', function(){
    var thisID = $(this).attr("id"),
        thisNum = thisID.replace("name", "");
    document.getElementById("name" + thisNum).innerHTML = "name" + thisNum;
});

另一种纯粹的jQuery解决方案是：

$('button[id^="name"]').on('click', function(){
    var t       = $(this),
        thisID  = t.attr("id");

    t.html("name" + thisID.replace("name", ""));
});

如何使用一个函数创建多个jquery函数？

3 个答案: