[英]How to get element data within click function?
Is there a tidier/easier way of getting the checkbox element's 'catNum' value when in its 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'));
});
The element that comes into the click
function 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. 进入
click
函数的元素是一个原始的DOM对象,而不是一个jQuery对象,所以为了在它上面使用jQuery方法,我们必须首先通过jQuery传递它。 This is why this.data("catNum")
doesn't work in your example code. 这就是
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 this
as 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
My two cents. 我的两分钱。 Sorry for more extensive answer than asked / I planned.
很抱歉,答案比我/我计划的更广泛。 Might have typos but seems to work at js fiddle :
可能有拼写错误但似乎在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.