javascript 替换 url link 循环

Question

我是 Javascript 的初学者，在这里阅读了几本 post，但我的代码无法正常工作。希望你能解释解决方案:)

所以基本上我有四组图片，但我需要将 URL 中的所有 $_12.JPG 替换为 $_57.JPG 这样我就可以得到更大尺寸的图片（只有图片分配给 class="ebay" / id="ebay"）。我需要在浏览器开始读取页面时执行此操作，不涉及任何事件或按钮。

以下是我的源代码：

<div>
<img class="ebay" id="ebay" u="image" src="http://i.ebayimg.com/00/s/NzgwWDc4MA==/z/neAAAOSwrklU28I8/$_12.JPG?set_id=880000500F">
<img u="thumb" src="http://i.ebayimg.com/00/s/NzgwWDc4MA==/z/neAAAOSwrklU28I8/$_12.JPG?set_id=880000500F">
</div>
<div>
<img class="ebay" id="ebay" u="image" src="http://i.ebayimg.com/00/s/NzgwWDc4MA==/z/r8cAAOSwNSxU28I9/$_12.JPG?set_id=880000500F">
<img u="thumb" src="http://i.ebayimg.com/00/s/NzgwWDc4MA==/z/r8cAAOSwNSxU28I9/$_12.JPG?set_id=880000500F">
</div>
<div>
<img class="ebay" id="ebay" u="image" src="http://i.ebayimg.com/00/s/NzgwWDc4MA==/z/HLgAAOSwPhdU28I-/$_12.JPG?set_id=880000500F">
<img u="thumb" src="http://i.ebayimg.com/00/s/NzgwWDc4MA==/z/HLgAAOSwPhdU28I-/$_12.JPG?set_id=880000500F">
</div>
<div>
<img class="ebay" id="ebay" u="image" src="http://i.ebayimg.com/00/s/NzgwWDc4MA==/z/6VkAAOSwPYZU28I-/$_12.JPG?set_id=880000500F">
<img u="thumb" src="http://i.ebayimg.com/00/s/NzgwWDc4MA==/z/6VkAAOSwPYZU28I-/$_12.JPG?set_id=880000500F">
</div>

我也喜欢循环这个功能，所以当我有超过 4 组图片（最多 15 组）并且 javascript 仍然可以代替我的 URL。

以下是我试过的：

window.onload = function() {

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

    var currentLink=document.getElementByClassName('ebay');
    var newLink = currentLink.src.replace('$_12.JPG','$_57.JPG');
    currentLink.src = newLink;

    }
}

Answer 1

错位var currentLink=document.getElementByClassName('ebay');

做，

window.onload = function() {

    var currentLink=document.getElementsByClassName('ebay');
    for ( var i = 0; i < currentLink.length; i++) { 
    var newLink = currentLink[i].src.replace('$_12.JPG','$_57.JPG');
    currentLink[i].src = newLink;
    }
}

Answer 2

你必须意识到 getElementsByClassName returns 是一个 HTMLCollection，而不是单个元素。因此，您不能通过访问集合的 .src 属性来简单地更改集合中的所有元素。

您需要遍历集合才能执行此操作：

var currentLinks = document.getElementsByClassName('ebay');

Array.prototype.forEach.call(currentLinks, function(currentLink) {
    var newLink = currentLink.src.replace('$_12.JPG','$_57.JPG');
    currentLink.src = newLink;
});

此外，您的 getElementByClassName 中有错字（您在 Elements 中遗漏了 s）。

见MDN

javascript 替换 url link 循环

javascript replace url link loop

html

javascript

url

loops

replace