是否可以美化这段 JavaScript 代码？

Question

我已经完成了我的研究，但我找不到任何与我的问题相关的有用信息。

原始 JavaScript 代码

$("#furniture1").keyup(function(){
  samefunction();
});
$("#furniture2").keyup(function(){
  samefunction();
});
$("#furniture3").keyup(function(){
  samefunction();
});

$("#color1").keyup(function(){
  samefunction();
});
$("#color2").keyup(function(){
  samefunction();
});
$("#color3").keyup(function(){
  samefunction();
});

我只能想出这个解决方案，有没有更好的解决方案？

var index_no = 0;

for(var i=1; i<=3; i++)
{
    index_no++;
    var name = '#furniture';
    name += index_no;

    $(name).keyup(function () {
        samefunction();
    });

    var name = '#color';
    name += index_no;

    $(name).keyup(function () {
        samefunction();
    });
}

Answer 1

只需用 , 分隔选择器。

$("#furniture1, #furniture2, #furniture3, #color1, #color2, #color3").keyup(function(){
  samefunction();
});

例子

$("#furniture1, #furniture2, #furniture3, #color1, #color2, #color3").keyup(function(){
    console.log(`Fired from the input ${this.id}`);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="furniture1">
<input id="furniture2">
<input id="furniture3">

对于动态，您需要一个循环。您可以减少循环中编写的代码，如

for(var i = 1; i <= 3; i++)
{
    $(`#furniture${i}, #color${i}`).keyup(function () {
        samefunction();
    });
}

或者正如@Satpal 在 cmets 中提到的，您可以为所有元素添加一个公共类，并使用该类来绑定事件处理程序。

$(".someClass").keyup(function(){
    console.log(`Fired from the input ${this.id}`);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="furniture1" class='someClass'>
<input id="furniture2" class='someClass'>
<input id="furniture3" class='someClass'>

Answer 2

选项 1：使用事件委托。这个解决方案是纯javascript：

document.querySelector('body').addEventListener('keyup', (e) => {
  if (e.target.classList.contains('keyup-capturer')) {
    somefunction();
  }
});

---

演示

$ctr = document.getElementById('counter');
document.querySelector('body').addEventListener('keyup', (e) => {
  if (e.target.classList.contains('keyup-capturer')) {
    somefunction();
  }
});
function somefunction() {
    console.log(`Fired from the input ${this.id}`);
    $ctr.innerHTML = parseInt($ctr.innerHTML, 10) + 1;
};

<input id="furniture1" class="keyup-capturer">
<input id="furniture2" class="keyup-capturer">
<input id="furniture3" class="keyup-capturer">
<input id="color1" class="keyup-capturer">
<input id="color2" class="keyup-capturer">
<input id="color3" class="keyup-capturer">

<div>Key Ups: <span id="counter">0</span></div>

---

选项 2 ^[*]：如果您确实需要使用 jQuery，您可以使用事件委托，或者使用 class 在任何元素中捕获 keyup 时调用相同的函数在那堂课上：

$('.keyup-capturer').keyup(function() { samefunction(); });

并将.keyup-capturer 类分配给所有#furniture-x 和#color-x 元素ID。 我不再推荐这种方法。请参阅下面的讨论。

---

^{[*] 一些观察：}

• ^{使用event delegation over 基于类的侦听器以获得最佳结果。}
• ^{不要使用 for 循环或 forEach 或 map 附加事件处理程序。您只会添加大量事件处理程序，最终您会发现页面变得更慢且更复杂。}
• ^{避免将侦听器附加到选定元素的集合（如选项#2 中所示）。见this line in jQuery's source code。 jQuery 对您隐藏了实现细节，但在幕后，它仍然为每个元素附加一个事件侦听器。因此，如果您使用非基于 ID 的选择器，例如类选择器 $('.c1') 或属性选择器 $('[disabled]') 等），请记住这一事实。感谢 @t.niese 在 cmets 中的 pointing this out。}

Answer 3

尝试在所有家具上添加类furniture，在所有颜色上添加类color，等等...以便您可以按组选择它们：

let furnitures = document.querySelectorAll('.furnitures');
furnitures.forEach((furniture) => {
   furniture.addEventListener('keyup', function() {
      // your code here
   })
})

或者你可以直接传递你的函数：

let furnitures = document.querySelectorAll('.furnitures');
furnitures.forEach((furniture) => {
   furniture.addEventListener('keyup', samefunction)
})