找到你要的答案

Q:Best way to call a jQuery function from keyup on multiple fields?

Q:从多个领域KeyUp调用jQuery函数的最好方法?

I have a function which I want to call any time a user hits a key in any one of several fields.

I can achieve this by:

$("#a").keyup(function(){
    myfunction();
}); 
$("#b").keyup(function(){
    myfunction();
});
$("#c").keyup(function(){
    myfunction();  
});
$("#d").keyup(function(){
    myfunction();
});

but is there something like

$("#a","#b","#c","#d").keyup(function(){
    myfunction();
}); 

That would be more elegant?

(Incidentally I tried the above and it did not work)

JSFiddle

EDIT: I accepted David Escudero's answer below, as it answers the question I asked. However Erik Philips points out that it would be better to give all relevant fields a class and then call the event on keyup of that class. Which I can see is true.

我有一个函数,我想调用任何时候用户点击一个键在任何一个领域。

我可以做到这一点:

$("#a").keyup(function(){
    myfunction();
}); 
$("#b").keyup(function(){
    myfunction();
});
$("#c").keyup(function(){
    myfunction();  
});
$("#d").keyup(function(){
    myfunction();
});

但有什么像

$("#a","#b","#c","#d").keyup(function(){
    myfunction();
}); 

那会更优雅吗?

(顺便说一句,我试过了,没用)

JSFiddle

编辑:我接受了大卫·埃斯库德罗的答案,因为它回答我问的问题。但是Erik Philips指出,最好给所有相关领域的类然后调用这个类的KeyUp事件。我能看到的是真的。

answer1: 回答1:

There was a mistake on your fiddle, you didn't put function on it.

myfunction(){ to function myfunction(){

Then, you are putting double quotes on each selector. $("#a","#b","#c","#d").keyup(function(){

Change that to

$("#a,#b,#c,#d").keyup(function(){

Putting together:

function myfunction(){
   $("#result").append('<p>It worked!</p><br/>');
}

$("#a,#b,#c,#d").keyup(function(){
	myfunction();
});	
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="a" />
<input type="number" id="b" />
<input type="number" id="c" />
<input type="number" id="d" />

<div id="result"></div>

你的小提琴上有个错误,你没有把它放在上面。

myfunction() {功能myfunction() {

Then, you are putting double quotes on each selector. $("#a","#b","#c","#d").keyup(function(){

改变,

$(“#,# B,# C,D # KeyUp(function() {”)。

放在一起:

function myfunction(){
   $("#result").append('<p>It worked!</p><br/>');
}

$(“#,# B,# C,D # KeyUp(function() {”)。
	myfunction();
});	
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="a" />
<input type="number" id="b" />
<input type="number" id="c" />
<input type="number" id="d" />

<div id="result"></div>
answer2: 回答2:

I'm not a fan of any of these solutions (including your examples). They are all tightly coupled and reduce re-usability. Take a quick read of Decoupling Your HTML, CSS, and JavaScript.

I would highly recommend:

$(".js-myfunction").on('keyup', function(){
  myfunction();
});


<input type="text" value="Gideon" class="js-myfunction" />

Create a class you want to apply to all elements. This way instead of changing your Javascript everytime you need to add or remove an element, you change your html elements. Anyone reading your HTML knows what elements will execute your method (automatically). And your Javascript is not tightly coupled to HTML elements.

我不是这些解决方案的粉丝(包括你的例子)。它们都紧密耦合,减少重用性。采取快速阅读的解耦你的HTML,CSS,JavaScript。

我强烈推荐:

$(".js-myfunction").on('keyup', function(){
  myfunction();
});


<input type="text" value="Gideon" class="js-myfunction" />

创建要应用于所有元素的类。这种方式,而不是改变你的JavaScript每当你需要添加或删除一个元素,你就改变了你的HTML元素。有人读你的HTML知道元素将执行你的方法(自动)。和你的JavaScript不是紧密耦合的HTML元素。

answer3: 回答3:

Just treat your jQuery selection like a CSS selector:

$("#a, #b, #c, #d").keyup(function(){
    myfunction();
});

把你的jQuery选择像一个CSS选择器:

$("#a, #b, #c, #d").keyup(function(){
    myfunction();
});
answer4: 回答4:
$('#a, #b, #c, #d').keyup(myfunction);

https://jsfiddle.net/moogs/xoyrx4dv/1/

$('#a, #b, #c, #d').keyup(myfunction);

https://jsfiddle.net/moogs/xoyrx4dv/1/

jquery  function