Comment obtenir de l'élément de données au sein d'cliquez sur la fonction?

Est-il plus propre/leur facilite l'obtention de la case de l'élément 'catNum' valeur dans son cliquez sur la (les) fonction?

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

}

InformationsquelleAutor ban-geoengineering | 2013-11-15
  1. 4

    L'élément qui vient à l' click fonction est un brut DOM objet, et non un objet jQuery, afin d'utiliser les méthodes jQuery sur elle, nous avons à passer par jQuery premier. C'est pourquoi this.data("catNum") ne fonctionne pas dans votre exemple de code.

    Mais la jQuery() fonction peut accepter des objets DOM ainsi que le sélecteur de chaînes, de sorte qu'au lieu de

    jQuery('#' + this.id)

    vous pouvez simplement utiliser

    jQuery(this)

    Qui comme vous le souhaitez, beaucoup plus propre.

    Alternativement, vous pouvez utiliser this brut DOM objet, mais vous auriez besoin d'utiliser les méthodes du DOM avec elle plutôt que les méthodes jQuery:

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

    ou

    this.getAttribute("data-catNum")   //works in all browsers
    • Super, merci à vous deux.
    InformationsquelleAutor Spudley
  2. 4
    checkbox.click(function() {
    alert("The cat num selected is: " + jQuery(this).data('catNum'));
});
    InformationsquelleAutor jah
  3. 0

    Mes deux cents. Désolé pour le plus vaste de la réponse qu'invité /j'ai prévu. Pourrait avoir des fautes de frappe, mais semble fonctionner au 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"));
    });
}
    InformationsquelleAutor NotJustin