javascript 选择每个项目的jQuery调用函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16642828/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery call function with each item in selection
提问by Mike U
I am trying to call a function using each object found in jQuery selection
我正在尝试使用在 jQuery 选择中找到的每个对象调用一个函数
<a href="#" class="can-click" data-code="a">a</a>
<a href="#" class="can-click" data-code="b">b</a>
<a href="#" class="can-click" data-code="c">c</a>
<a href="#" class="can-click" data-code="d">d</a>
Each aelement has a data-code value:
每个a元素都有一个数据代码值：
<p class="output" data-value="1"></p>
<p class="output" data-value="2"></p>
<p class="output" data-value="3"></p>
Each pelement has a data-value:
每个p元素都有一个数据值：
$(document).ready(function () {
$(".can-click").click(function () {
var code = $(this).data("code");
$("output").each(Display(code));
});
});
What I want is that when you click on the anchor ayou will get an alert showing you the data-code from the anchor clicked and the data-value for each p, with the code attached I want 3 alerts to pop up.
我想要的是，当您单击锚点时，a您将收到一个警报，显示来自单击的锚点的数据代码和每个 的数据值p，并附上代码我希望弹出 3 个警报。
function Display(code) {
var p = $(this);
var value = p.data("value");
alert(code + " " + value);
}
Here is a link to the code in jsfiddle: http://jsfiddle.net/mikeu/XFd4n/
这是 jsfiddle 中代码的链接：http: //jsfiddle.net/mikeu/XFd4n/
采纳答案by Rohan Kumar
You have to use .for class-selectors and pass thisobject when you are calling Displayfunction like,
当您调用函数时，您必须使用.类选择器并传递this对象，Display例如，
$(document).ready(function() {
$(".can-click").click(function(e) {
e.preventDefault();
var code = $(this).data("code");
$(".output").each(function() { // use . for class selectors
Display(code, this); // pass this from here
});
});
});
function Display(code, ths) { // ths = this, current output element
var p = $(ths), // use ths instead of this
value = p.data("value");
console.log(code + " " + value);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="can-click" data-code="a">a</a>
<a href="#" class="can-click" data-code="b">b</a>
<a href="#" class="can-click" data-code="c">c</a>
<a href="#" class="can-click" data-code="d">d</a>
<p class="output" data-value="1"></p>
<p class="output" data-value="2"></p>
<p class="output" data-value="3"></p>回答by PSL
Try this:-
试试这个：-
You need to pass in function reference to the obj.each callback. obj.each(Display(code))is wrong, it should be obj.each(Display); but since here you want to pass in the variable, you can invoke it inside an anonymous function.
您需要将函数引用传递给 obj.each 回调。obj.each(Display(code))错了，应该是obj.each(Display)；但既然你想在这里传递变量，你可以在匿名函数中调用它。
Demo
演示
$(".output").each(function(){
Display(code, this)});
});
Script
脚本
$(document).ready(function () {
$(".can-click").click(function () {
var code = $(this).data("code");
$(".output").each(function(){
Display(code, this)});
});
});
function Display(code,$this) {
var p = $($this);
var value = p.data("value");
alert(code + " " + value);
}
