Question

我知道当用户点击链接时，变量i保持值为3.但是如果你想在clik第一个链接时获取 link1 ， link2 如果你点击第二个链接等等。是否有可能得到这样的结果？

<!DOCTYPE html>
<html>
<body>
<p id="p1">linklisthere</p>
<script>
text = "";
for (var i = 0; i < 3; i++) {
text += '<div><a href="javascript:void(0)" onclick=alert("link"+i);>presshere</a></div>';
}
document.getElementById("p1").innerHTML = text;
</script>
</body>
</html>

也许这个问题与闭包这个我还没有完全理解的概念有关。

Answer 1

你的问题就在这一行：

text += '<div><a href="javascript:void(0)" onclick=alert("link"+i);>presshere</a</div>';

i在文本中，您需要将其从字符串中删除，关闭锚标记，并将javascript放入引号。

text += '<div><a href="javascript:void(0)" onclick="alert(\"link\"+'+i+');">presshere</a></div>';

Answer 2

你的问题在这里

text += '<div><a href="javascript:void(0)" onclick=alert("link"+i);>presshere</a</div>';

变量i被解释为字符串NOT的一部分而不是变量。为了解决这个问题，你必须把＆＃39; + i +＆＃39;相反，如下所示

text += '<div><a href="javascript:void(0)" onclick="alert(\'link'+i+'\');">presshere</a></div>';

我还修复了未正确关闭的<a>代码，并在点击功能周围加上了引号。

就个人而言，我会重写你的代码看起来像这样

text += '<div><a href="javascript:void(0)" onclick="alert(this.title)" title="link'+i+'">presshere</a></div>';

这样就不需要反斜杠引用并且更容易阅读

Answer 3

您的问题与闭包无关，而是您使用全局变量来报告 i 的值。您可以使用立即调用的函数表达式（IIFE）来避免：

<p id="p1">linklisthere</p>
<script>
// Use an IIFE to avoid globals for code that runs once and
// doesn't need to persist
(function() {
  var i = 0,
      link,
      p = document.getElementById('p1');

  while (i < 3) {

    // Use DOM methods to construct elements, using innerHTML is
    // ok but gets clunky for anything complex
    link = document.createElement('span');
    link.style.cursor = 'pointer';  // Should be implemented using a class or CSS

    // Use an IIFE to break the closure to i
    link.onclick = (function(num) {
      return function() {
        alert('link' + num);
      }
    }(i));

    // Counter could be incremented in the above call but here is clearer
    i++;

    link.appendChild(document.createTextNode('press here'));
    p.appendChild(link);

    // help layout a bit for this example
    p.appendChild(document.createElement('br'));
  }
}());
</script>

请注意，如果您不想要A元素，则不应使用A元素。使用样式为用户提供可以点击该项目的提示，并按照WAI建议来协助访问（例如，将role="link"添加到范围内）。

如何在稍后调用的函数中预设变量值

3 个答案: