Question

下面的代码为它在数组中找到的每个对象创建一个Div。然后它添加标题，段落，图像和锚点。

div实际上看起来像是一个彼此叠加的矩形。我想要做的是根据我的对象中的键（coffeShops [i] .menu）为div添加一个onclick属性。当我这样做时，点击只是没有做任何事情，我在控制台

中收到此错误消息

＆＃34;未捕获的TypeError：无法读取属性＆＃39; menu＆＃39;未定义＆＃34;

仅当我使用对象键coffeShops [i] .menu尝试window.open时才会发生这种情况。如果我用＆＃34; http://www.google.com＆＃34;它工作得很好。此外，该变量的链接显示在控制台中就好了。所以我知道它从对象中获取数据就好了。但由于某种原因，它并不想从div开放。

仅供参考我对此非常陌生，如果解释没有意义，请道歉。

    var containerDiv = document.getElementById("container");
    console.log(containerDiv);


   for (var i = 0; i < coffeeShops.length; i++){

      var launchMenu = function(){
        window.open(coffeeShops[i].menu);
      }

      console.log(coffeeShops[i].menu);

        var coffeeShopDiv = document.createElement("div");
        coffeeShopDiv.className = "coffeeShop";
        coffeeShopDiv.onclick = launchMenu;
        containerDiv.appendChild(coffeeShopDiv);

        var coffeeShopImage = document.createElement("img");
        coffeeShopImage.src = coffeeShops[i].image;
        coffeeShopImage.className = "coffeeImage";
        coffeeShopDiv.appendChild(coffeeShopImage);

        var coffeeShopHeader = document.createElement("h1");
        coffeeShopHeader.className = "coffeeHeader"
        coffeeShopHeader.innerHTML = coffeeShops[i].name;
        coffeeShopDiv.appendChild(coffeeShopHeader);

        var coffeeShopPar = document.createElement("p");
        coffeeShopPar.className = "coffeeDescription"
        coffeeShopPar.innerHTML = coffeeShops[i].description;
        coffeeShopDiv.appendChild(coffeeShopPar);

        var coffeeMenu = document.createElement("a");
        coffeeMenu.href = coffeeShops[i].menu;
        coffeeMenu.innerHTML = "MENU"
        coffeeShopDiv.appendChild(coffeeMenu);



    };

Answer 1

已编辑：根据评论

看起来您需要将打开新窗口的函数与生成页面项的代码分开。通过稍微重构您的代码，可以使用element.addEventListener()方法实现。

/* place the 'launchMenu' outside of 
   the for-loop so it can be accessed
   by each of the target elements */

function launchMenu(event){
    /* get the class attribte of
       the clicked element */
    var clickedClass = event.target.className;
    var targetElement,
        link;
    /* is the clicked element the containing div? */
    if (clickClass !== 'coffeeShop') {
       /* nope */
       targetElement = event.target.parentNode;
    } else {
       /* yep */
       targetElement = event.target;
    }
    /* get 'data-url' of target */
    link = targetElement.getAttribute('data-url');
    /* open the new window */
    window.open(link);
}

/* elsewhere: create elements as before */
for (var i = 0; i < coffeeShops.length; i++){
    var coffeeShopDiv = document.createElement("div");
    coffeeShopDiv.className = "coffeeShop";
    /* add 'data-' attribute to target div */
    coffeeShopDiv.setAttribute('data-url', coffeeShops[i].menu);
    containerDiv.appendChild(coffeeShopDiv);

    var coffeeShopImage = document.createElement("img");
    coffeeShopImage.src = coffeeShops[i].image;
    coffeeShopImage.className = "coffeeImage";
    coffeeShopDiv.appendChild(coffeeShopImage);

    var coffeeShopHeader = document.createElement("h1");
    coffeeShopHeader.className = "coffeeHeader"
    coffeeShopHeader.innerHTML = coffeeShops[i].name;
    coffeeShopDiv.appendChild(coffeeShopHeader);

    var coffeeShopPar = document.createElement("p");
    coffeeShopPar.className = "coffeeDescription"
    coffeeShopPar.innerHTML = coffeeShops[i].description;
    coffeeShopDiv.appendChild(coffeeShopPar);

    var coffeeMenu = document.createElement("a");
    coffeeMenu.className = 'coffeeMenu';
    coffeeMenu.innerHTML = "MENU"
    coffeeShopDiv.appendChild(coffeeMenu);

    /* attach an eventListener to each
       created '.coffeeShopDiv' element */
    coffeeMenu.addEventListener(
        'click', launchMenu, false
    );   
};

目标元素（coffeeShopDiv）现在在其＆quot; data-url＆＃39;中包含了一个url-reference。 attriubte并分配了一个事件监听器。

单击目标元素或其任何子元素时，将调用launchMenu()函数。此功能通过将className属性与＆＃39; coffeeShopDiv＆＃39;的班级名称进行比较来检查点击的元素。 - 如果点击的元素的类名不是＆＃39; coffeeShop＆＃39; targetElement变量被分配给被点击的元素父节点（即＆＃39; coffeShopDiv＆＃39;）。

＆＃39; data-url＆＃39;在window.open()中获取并使用了引用。

另见：

使用data-*属性
Event.target
Quriksmode: Introduction to Events
This StackOverflow answer关于使用 window.open()

JavaScript：使用URL作为变量将onClick添加到Div

1 个答案: