Question

我创建了一个简单的应用程序，当您点击模糊的图像时，会出现未模糊的图像，但由于某种原因它似乎不起作用。我在这个应用程序中使用了Bootstrap以允许它移动友好，虽然我不相信它会导致我的JS代码中断。

这是我的标记：

<div class="container">
      <div class="row row-padding center-block">
        <div class="col-lg-4 col-md-6 col-sm-6">
          <img id="zero" src="zeroblur.jpg">
        </div><!-- end col-lg-4 col-sm-6 -->
        <div class="col-lg-4 col-md-6 col-sm-6">
          <img id="one" src="oneblur.jpg">
        </div><!-- end col-lg-4 col-sm-6 -->
        <div class="col-lg-4 col-md-6 col-sm-6">
          <img id="two" src="twoblur.jpg">
        </div><!-- end col-lg-4 col-sm-6 -->
        <div class="col-lg-4 col-md-6 col-sm-6">
          <img id="three" src="threeblur.jpg">
        </div><!-- end col-lg-4 col-sm-6 -->
        <div class="col-lg-4 col-md-6 col-sm-6">
          <img id="four" src="fourblur.jpg">
        </div><!-- end col-lg-4 col-sm-6 -->
        <div class="col-lg-4 col-md-6 col-sm-6">
          <img id="five" src="fiveblur.jpg">
        </div><!-- end col-lg-4 col-sm-6 -->
      </div><!-- end row -->
    </div><!-- end container-fluid -->

（我只包含了与我的JS代码相关的标记）

这是我的JS代码：

function init() {
    var images = document.getElementsByTagName("img");
    for (var i = 0; i < images.length; i++);
        images[i].onclick = showAnswer;
};

function showAnswer(eventObj) {
    var image = eventObj.target;

    var name = image.id;
    name = name + ".jpg";
    image.src = name;
}

window.onload = init;

Answer 1

此：

for (var i = 0; i < images.length; i++);
    images[i].onclick = showAnswer;

应该是这样的：

for (var i = 0; i < images.length; i++){
    images[i].onclick = showAnswer;
}

Answer 2

答案是你的循环除了改变i的值之外什么都不做。

var i = 0;
for (; i < images.length; i += 1) ; // semicolon means end-of-statement (ie: do nothing)

从技术上讲，你的最后一张图片应该是可点击的（因为i已被更改为数组长度之前的最后一个数字。）

如果删除分号，则该语句应该可以正常工作。

var i = 0;
for (; i < images.length; i += 1)
  images[i].onclick = showAnswer;

然而，这就是为什么我告诉我的团队成员，他们应该始终使用if，while，for等方面的大括号......

var i = 0;
for (; i < images.length; i += 1) {
  images[i].onclick = showAnswer;
}

我们现在正处理一系列更为明确的行为。这并不是说具有重要空白的语言很糟糕，但是当你在空白重要时开始混合和匹配时它会变得混乱，而当它没有重要时，在同一个函数中，更不用说同一个文件。

此外，我让他们使用更多功能性技术。

images.forEach( img => img.onclick = showAnswer );

forEach功能不是很强大，但它至少比担心有趣的循环行为更好。

当然，如果images是某种NodeList（例如：来自document.get____( );或document.querySelectorAll( )，那么你必须更进一步：

[].slice.call(images).forEach( img => img.onclick = showAnswer );

哪个更好分为两个步骤：

function toArray (arrLike, start, end) {
  return [].slice.call(arrLike, start, end);
}

toArray(images).forEach( img => img.onclick = showAnswer );

Answer 3

您的Android函数在init行的末尾有一个额外的分号。

最佳做法是始终使用括号，以避免此类问题。

所以用这个替换你的for函数，它应该可以正常工作：

init

Answer 4

您不能像这样添加事件监听器：

images[i].onclick = showAnswer;

使用：

images[i].addEventListener('click', showAnswer);

我错过了我可能忽略的JavaScript代码中的内容吗？

4 个答案: