Javascript 如何在单击函数中获取元素数据？

在其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);
}

函数createCategoriesList（）{
var catNames=新数组（“第一类”、“第二类”、“第三类”）；
var catimagerurls=新数组（“First.png”、“Second.png”、“Third.png”）；
jQuery（“
”{
id:‘地图猫’
}).appendTo（“#映射控件”）；
对于（变量i=0；i”）.appendTo（“#映射猫”）；
jQuery（“”{
键入：“复选框”，
选中：“选中”，
id:“猫”+i，
名称：“猫”+i
}).附件（清单项目）；
复选框。数据（“catNum”，i）；
复选框。单击（函数（）{
//警报（“选择的cat num为：“+this.data”（“catNum”）；//引发异常
警报（“选择的cat num是：”+jQuery（“#”+this.id）。data（'catNum'）；//有效，但必须有更好的方法？？
});
jQuery（“”{
htmlFor:catImageURLs[i]，
文本：猫名[i]，
“猫”+i
}).附件（清单项目）；
}

---

}进入

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.

或

---

我的两分钱。对不起，我的回答比我所问的/我计划的要多。可能有拼写错误，但似乎有效：

$（函数（）{
createCategoriesList（）；
});
函数createCategoriesList（）{
var catNames=新数组（“第一类”、“第二类”、“第三类”）；
var catimagerurls=新数组（“First.png”、“Second.png”、“Third.png”）；
变量输出='
；
$。每个（CATName、函数（i、v）{
输出+='
'；
输出+=''+v+''；
输出+=''；
输出+=''；
输出+='
'；
});
输出+='
'；
$（“#映射控件”）.html（输出）；
$（“#映射猫”）。在（“单击”，“输入”，函数（）上）{
警报（$（this.data（“catnum”））；
});
}

this.dataset.catNum      //for modern HTML5 browsers.

this.getAttribute("data-catNum")   //works in all browsers

$(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"));
    });
}