Question

尝试进行此操作，以便在单击每个项目时弹出一个名称。我给每个元素一个ID，但我显然错过了一些东西。编写代码，想知道我的大脑缺少什么（即我认为我应该做一个变量，但我不确定？）：

$(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

我认为只需删除clicks数组和foreach构造并使用选择器来处理您感兴趣的元素，就会更好：

$(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 2

你走在正确的轨道上，这里有一些带注释的代码可以做你想要的：

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

修改

如果您想使用地图来识别您的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]); }); }); });

Answer 3

我认为有很多方法可以给那只猫上皮。但使用与此类似的程序结构应该可以正常工作：

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

通过点击返回循环

3 个答案: