如何在点击功能中获取元素数据？答案

【问题标题】：How to get element data within click function?如何在点击功能中获取元素数据？
【发布时间】：2013-11-15 13:45:09
【问题描述】：

在其 click() 函数中获取复选框元素的 '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);
}

}

【问题讨论】：

标签： javascript jquery function click jquery-data

【解决方案1】：

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

【讨论】：

【解决方案2】：

checkbox.click(function() {
    alert("The cat num selected is: " + jQuery(this).data('catNum'));
});

【讨论】：

【解决方案3】：

我的两分钱。对不起，比我计划的要求更广泛的答案。可能有错别字，但似乎可以工作at 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"));
    });
}

【讨论】：