[英]How to get element data within click function?
在click()函数中有没有更简洁/更简单的方法来获取checkbox元素的'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);
}
}
checkbox.click(function() {
alert("The cat num selected is: " + jQuery(this).data('catNum'));
});
进入click
函数的元素是一个原始的DOM对象,而不是一个jQuery对象,所以为了在它上面使用jQuery方法,我们必须首先通过jQuery传递它。 这就是this.data("catNum")
在您的示例代码中不起作用的原因。
但是jQuery()
函数可以接受DOM对象以及选择器字符串,因此不是
jQuery('#' + this.id)
你可以使用
jQuery(this)
你想要的更多,更整洁。
或者,您可以将this
用作原始DOM对象,但是您需要使用DOM方法而不是jQuery方法:
this.dataset.catNum //for modern HTML5 browsers.
要么
this.getAttribute("data-catNum") //works in all browsers
我的两分钱。 很抱歉,答案比我/我计划的更广泛。 可能有拼写错误但似乎在js小提琴上工作:
$(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"));
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.