我完成了我的研究,但我找不到与我的问题有关的任何有用的东西。
原始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();
});
}
答案 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();
}
});
$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。
我不再推荐这种方法了。请参阅下面的讨论。
[*]一些观察结果:
forEach
或map
来附加事件处理程序。您只是添加了大量的事件处理程序,最终,您会发现您的页面变得越来越复杂,越来越复杂。 $('.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)
})