是否可以美化此JavaScript代码?

时间:2017-11-20 07:41:18

标签: javascript jquery

我完成了我的研究,但我找不到与我的问题有关的任何有用的东西。

原始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();
    });
}

3 个答案:

答案 0 :(得分:3)

只需将选择器与,分开。

$("#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'>

答案 1 :(得分:3)

选项1:使用事件委派。这个解决方案是纯粹的javascript:

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

演示

&#13;
&#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;
&#13;
&#13;

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

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

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

[*]一些观察结果:

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

答案 2 :(得分:2)

尝试在所有家具上添加课程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)
})