Question

我是javascript的新手，只是试图弄清楚如何获得100个图像链接，以便在点击后更改为特定图像。

我知道你可以添加ID，但不得不制作100或1000的ID会很痛苦。也许有人能够帮助我解决这个问题，或者指导我正确的方向。谢谢！

<a id="click"><img id="change" src="http://i.imgur.com/zS0lOud.jpg" onClick="window.open('http://yahoo.com','_blank');"></a>
<a id="click"><img id="change" src="http://i.imgur.com/zS0lOud.jpg" onClick="window.open('http://google.com','_blank');"></a>
<a id="click"><img id="change" src="http://i.imgur.com/zS0lOud.jpg" onClick="window.open('http://monster.com','_blank');"></a>

document.getElementById('click').onclick = function(){
    document.getElementById('change').src = "http://i.imgur.com/0eaWvgw.jpg";
}

Answer 1

使用jQuery，

 $('a').on('click', function() {
    $('img').each(function() {
        $(this).attr('src', 'http://i.imgur.com/0eaWvgw.jpg')
    });
});

Answer 2

首先，There must not be multiple elements in a document that have the same id value.

对要绑定点击事件的所有元素使用common-class
使用jQuery .on方法在指定common-class的所有元素上注册事件

另请注意，您已将inline-click个事件附加到img个元素上，假设在调度click后会执行此操作吗？

$('.click').on('click', function(e) {
  e.preventDefault(); //To prevent behavior of `a` elements
  $(this).find('img.change').prop('src', 'http://i.imgur.com/0eaWvgw.jpg');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a class="click">
  <img class="change" src="http://i.imgur.com/zS0lOud.jpg" onClick="window.open('http://yahoo.com','_blank');">
</a>
<a class="click">
  <img class="change" src="http://i.imgur.com/zS0lOud.jpg" onClick="window.open('http://google.com','_blank');">
</a>
<a class="click">
  <img class="change" src="http://i.imgur.com/zS0lOud.jpg" onClick="window.open('http://monster.com','_blank');">
</a>

Answer 3

正如其他人所说，id必须是唯一的。一个类就是你想要使用的。 class属性是以空格分隔的单词列表。在这种情况下，我们只需要在所有链接上使用一个类。现在你在所有这些链接上放了一些JS，但你应该这样写：

<a class="change" href="http://www.example.com" target="_blank">
  <img src="image.png" />
</a>

即使在以这种方式禁用JavaScript的浏览器上，链接也会在新窗口或标签中打开网站。

然后我们需要使用“change”类检索所有元素的列表，并为所有元素添加一个事件监听器。

var changeLinks = document.querySelectorAll('.change');

var clickListener = function(e) {
  var imgElement = e.currentTarget.querySelector('img');
  imgElement.src = 'newimage.png';

  // technically, the image is only changed once so we can remove the
  // event listener once it has run on a link
  e.target.removeEventListener('click', clickListener);
};

for(var i=0, element; element = changeLinks[i]; ++i) {
  element.addEventListener('click', clickListener);
}

使用onclick更改图像，以获得100个不同的图像链接

3 个答案: