Возврат цикла с помощью кликов

Question

Попытка сделать так, чтобы при каждом щелчке по элементу появлялось имя. Я дал каждому элементу идентификатор, но я, очевидно, что-то пропустил. Код, как написано, интересно, что мой мозг не хватает (то есть я думаю, что я должен делать переменную, но я не уверен.):

$(document).ready(function() { 
    var clicks= ["h1", "h2", "p1", "img", "p2", "li1", "li2", "li3", "li4", "li5", "p3"] 

    clicks.forEach(function(element) { 
     var name = $(" ") { 
      $(clicks).click(function); 
      alert("I'm a "+name+"!") 
     }); 
    }); 
}); 

ETA: Также интересно, что делать с «элемент», который я помещаю после функции. Боже, это беспорядок.

Answer 1

Я думаю, что существует много способов кожи этого кота. Но, используя ту же самую структуру программы, как вы уже что-то, как это должно работать:

$(document).ready(function() { 
    var clicks= ["#h1", "#h2", "#p1", "img", "#p2", "#li1", "#li2", "#li3", "#li4", "#li5", "#p3"] 

    clicks.forEach(function(element) { 
     $(element).click(function() { 
      alert("I'm a "+element+"!"); 
     }); 
    }); 
}); 

Answer 2

Я думаю, что вы бы лучше просто устраняя вашу clicks массив и Еогеасп конструкции и с помощью селектора для элементов, которые Вас интересуют :

$(document).ready(function() { 
    var selectorString = 'h1, h2, p1, img, p2, li1, li2, li3, li4, li5, p3'; 

    $(selectorString).click(function() { 
     alert("I'm a " + this.tagName + "!"); 
    }); 
}); 

Answer 3

вы находитесь на правильном пути, вот некоторые аннотированный код, который будет делать то, что вы хотите:

// same as $(document).ready(), but shorter: 
$(function(){ 
    var clicks = ["h1" /* etc... */]; 

    // this just iterates through the strings you set above, so you'll have strings inside the loop. 
    clicks.forEach(function(selector){ 
    // any variable you set here would be available inside the click handler, but note that because javascript is asynchronous, this would not be what you expect. 

    // if you're looking for the element, by ID, you'll need to use '#id' instead of 'id'. I append '#' to the beginning so it's using IDs. 
    $('#' + selector).on('click',function(el){ 
     // this is now a jquery reference to the element. 
     var element = $(el); 
     // you can ask the element for it's id here, and because it's in scope, it will be correct. 
     var id = element.attr('id'); 
     alert('I am a ' + id); 
    }); 
    }); 
}); 

редактировать:

Если вы хотите использовать карту, чтобы определить свои идентификаторы, вот как этот код будет выглядеть:

// same as $(document).ready(), but shorter: 
$(function(){ 
    var clickMap = { 
    "h1" : "header one", 
    "p1" : "paragraph one" 
    /* etc */ 
    }; 

    // this just iterates through the strings you set above, so you'll have strings inside the loop. 
    // we'll use Object.keys to get just the keys from the map, which will be your IDs. 
    Object.keys(clickMap).forEach(function(selector){ 
    // any variable you set here would be available inside the click handler, but note that because javascript is asynchronous, this would not be what you expect. 

    // if you're looking for the element, by ID, you'll need to use '#id' instead of 'id'. I append '#' to the beginning so it's using IDs. 
    $('#' + selector).on('click',function(el){ 
     // this is now a jquery reference to the element. 
     var element = $(el); 
     // you can ask the element for it's id here, and because it's in scope, it will be correct. 
     var id = element.attr('id'); 
     // we'll use the value from our click map now, to print "paragraph one" for "p1", etc. 
     alert('I am a ' + clickMap[id]); 
    }); 
    }); 
});