Question

下面是我的jquery代码，我想将这两个函数合并为1。

$("#first_name").change(function() {
  $('.showvalue').text("First Name Successfully Updated.");
});

$("#last_name").change(function() {
  $('.showvalue').text("last Name Successfully Updated.");
});

Answer 1

这将显示“First Name Successfully Updated”。为名字和“姓氏成功更新”。为姓：

var names = ['First', 'Last'];
for (var i = 0; i < names.length; i++) {
  var name = names[i];
  $("#" + name.toLowerCase() + "_name").change(function() {
    $('.showvalue').text(name + " Name Successfully Updated.");
  });
}

因此，这可以保持字段名称的大小写。

此解决方案也可以通过更多字段轻松扩展。

Answer 2

组合选择器，然后在事件处理程序中检查id以确定要使用的消息：

$("#first_name, #last_name").change(function() {
   var prefix = this.id === 'first_name' ? 'First' :'Last';
   $('.showvalue').text( prefix + " Name Successfully Updated.");
});

Answer 3

您可以在javascript中为使用CLASS选择器

的元素重复使用相同的功能

（示例类：changeTrigger）。

<p>First Name <input type="text" id="first_name" class="changeTrigger" data-ref="First Name"/></p>
<p>Last Name <input type="text" id="last_name" class="changeTrigger" data-ref="Last Name"/></p>
<p class='showvalue'></p>

其次，定义一个函数来处理同一个CLASS中的多个元素

$(".changeTrigger").change(function(){

  //You may use data-ref to attach "FIELD NAME" on element.
  var refName = $(this).data("ref");

  $('.showvalue').text(refName + " Successfully Updated.");
});

https://jsfiddle.net/u3f8505q/

如何合并2个jquery函数

3 个答案: