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在评论中提到你可以为所有元素添加一个公共类，并使用该类绑定事件处理程序，如。

$(".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();
  }
});

演示

＆＃13;

$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;
};

＆＃13;

<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>

＆＃13;

选项2 ^[*]：如果确实需要使用jQuery，可以使用事件委派，或使用class在捕获keyup时调用相同的函数该类的任何元素：

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

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

^{[*]一些观察结果：}

^{使用event
delegation结束
基于类的侦听器，以获得最佳效果。}
^{不要使用for循环或forEach或map来附加事件处理程序。您只是添加了大量的事件处理程序，最终，您会发现您的页面变得越来越复杂，越来越复杂。}
^{避免将侦听器附加到所选元素的 set （如选项＃2中所示）。见this line in jQuery's source code。 jQuery隐藏了你的实现细节，但是在引擎盖下，它仍然为每个元素附加一个事件监听器。因此，如果您使用非基于ID的选择器（如类选择器$('.c1')或属性选择器$('[disabled]')等），请记住这一事实。感谢@ t.niese在评论中提到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)
})

是否可以美化此JavaScript代码？

3 个答案:

演示