for 循环中的 onClick 未触发答案

【问题标题】：onClick in a for loop is not firingfor 循环中的 onClick 未触发
【发布时间】：2012-02-16 13:40:24
【问题描述】：

下面是最近tutorial of Computer Arts magazine 的代码。我试图做的是在循环中实现一个onClick 函数，以便每个div 都可以点击并加载相应的网页。

我有一个数组，目前只有一组值，但您可以了解多个相似值的概念：

var itemsHTML = '',
        items = [
        {
          itemType:'ani',
          itemName:'Show Reel 10-11',
          path:'thumb_showreel.jpg',
          urlPath:'showreel.html'
        }];

以及从数组中获取信息的循环（请注意onClick - 这是我的输入，其他一切都来自教程：

    for(var i = 0; i < items.length; i++) {
      var type = items[i]['itemType'];
      var name = items[i]['itemName'];
      var path = items[i]['path'];
      var urlPath = items[i]['urlPath'];
      itemsHTML += "    <div class=\"element " + type + "\"  style=\"background-image:url('portfolio/" + type + "/" + path + "')\" onClick=\"document.location='http://www.thepapertorium.co.uk/'" + urlPath + "\">";
      itemsHTML += "      <div class=\"label\">";
      itemsHTML += "        <h1>" + name + "<\/h1>";
      itemsHTML += "      <\/div>";
      itemsHTML += "    <\/div>";
    }

同样的onClick 来自我的标题横幅。它在那里正常工作，所以我想我可以将它粘贴到这里，并且自然地遵守for 循环所需的语法，但我没有运气。请帮助解决这个简单的难题！

【问题讨论】：

您能否提供一个构建后的 HTML 示例？让脚本运行，查看源代码并编辑问题以添加脚本生成的内容。
使用JS连接嵌入在HTML中的JS字符串？这是调试的噩梦（正如您所发现的）。使用标准的 DOM 操作而不是使用 innerHTML。

标签： javascript loops for-loop onclick

【解决方案1】：

您的问题可能出在单个 ' - 它应该在 URL 的末尾：

onClick=\"document.location='http://www.thepapertorium.co.uk/" + urlPath + "'\"

【讨论】：

【解决方案2】：

我认为您的问题是document.location 而不是window.location。但我不会为此使用 javascript，您可以使用锚标记：

itemsHTML += "    <a class=\"element " + type + "\"  style=\"display: block; background-image:url('portfolio/" + type + "/" + path + "')\" href=\"http://www.thepapertorium.co.uk/" + urlPath + "\">";

【讨论】：

document.location 不是问题，但您不需要 javascript 来更改位置是正确的
感谢@mplungjan，我不知道document.location 存在，一直使用windows.location...
也可以随意投票给我。我也想在这里得到一些爱:)

【解决方案3】：

引号问题 - 我通过颠倒 " 和 ' 为您简化了它们

我还添加了； cursor:pointer 并将 document.location 更改为 window.location 因为这样更正确。实际上，bfavaretto 说您不需要 javascript 来更改页面确实是正确的 - 一个链接甚至可以免费为您提供指针

DEMO

itemsHTML += '<div class="element ' + type + '" style="background-image:url(\'portfolio/' + type + '/' + path + '\')" onClick="window.location=\'http://www.thepapertorium.co.uk/' + urlPath + '\'">';

下次试试 jsfiddle.net 和 firebug

【讨论】：