javascript 如何在点击功能中获取元素数据？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20002496/
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
How to get element data within click function?
提问by ban-geoengineering
Is there a tidier/easier way of getting the checkbox element's 'catNum' value when in its click() function?
在单击（）函数时，是否有一种更整洁/更简单的方法来获取复选框元素的“catNum”值？
function createCategoriesList() {
var catNames = new Array("First cat", "Second cat", "Third cat");
var catImageURLs = new Array("First.png", "Second.png", "Third.png");
jQuery('<ul/>', {
id: 'map-cats'
}).appendTo('#map-controls');
for(var i = 0; i < catNames.length; i++ ) {
var listItem = jQuery('<li/>').appendTo('#map-cats');
jQuery('<img/>', {
src: catImageURLs[i],
alt: ''
}).appendTo(listItem);
var checkbox = jQuery('<input/>', {
type: 'checkbox',
checked: 'checked',
id: 'cat_' + i,
name: 'cat_' + i
}).appendTo(listItem);
checkbox.data("catNum", i);
checkbox.click(function() {
//alert("The cat num selected is: " + this.data("catNum")); //throws exception
alert("The cat num selected is: " + jQuery('#' + this.id).data('catNum')); //works but there must be a better way??
});
jQuery('<label/>', {
htmlFor: catImageURLs[i],
text: catNames[i],
for: 'cat_' + i
}).appendTo(listItem);
}
}
}
回答by jah
checkbox.click(function() {
alert("The cat num selected is: " + jQuery(this).data('catNum'));
});
回答by Spudley
The element that comes into the clickfunction is a raw DOM object, not a jQuery object, so in order to use jQuery methods on it, we have to pass it through jQuery first. This is why this.data("catNum")doesn't work in your example code.
进入click函数的元素是一个原始的 DOM 对象，而不是一个 jQuery 对象，所以为了在它上面使用 jQuery 方法，我们必须先通过 jQuery 传递它。这就是为什么this.data("catNum")在您的示例代码中不起作用的原因。
But the jQuery()function can accept DOM objects as well as selector strings, so instead of
但是该jQuery()函数可以接受 DOM 对象以及选择器字符串，所以不是
jQuery('#' + this.id)
you can just use
你可以使用
jQuery(this)
Which as you wanted, a lot tidier.
随心所欲，更整洁。
Alternatively, you can use thisas a raw DOM object, but you'd need to use the DOM methods with it rather than the jQuery methods:
或者，您可以使用this原始 DOM 对象，但您需要使用 DOM 方法而不是 jQuery 方法：
this.dataset.catNum //for modern HTML5 browsers.
or
或者
this.getAttribute("data-catNum") //works in all browsers
回答by NotJustin
My two cents. Sorry for more extensive answer than asked / I planned. Might have typos but seems to work at js fiddle:
我的两分钱。对不起，回答比问/我计划的更广泛。可能有错别字，但似乎在 js fiddle上工作：
$(function(){
createCategoriesList();
});
function createCategoriesList() {
var catNames = new Array("First cat", "Second cat", "Third cat");
var catImageURLs = new Array("First.png", "Second.png", "Third.png");
var output = '<ul id="map-cats">';
$.each(catNames, function(i, v) {
output += '<li>';
output += '<label for="cat_'+i+'">'+v+'</label>';
output += '<input type="checkbox" id="cat_'+i+'" name="cat_'+i+'" data-catnum="'+i+'" />';
output += '<img src="'+catImageURLs[i]+'" alt="" title="" />';
output += '</li>';
});
output += '</ul>';
$("#map-controls").html(output);
$("#map-cats").on("click", "input", function(){
alert($(this).data("catnum"));
});
}
