运行 JavaScript x 次，每次数组中的数字增加 1

Posted 2023-05-09

【中文标题】运行 JavaScript x 次，每次数组中的数字增加 1

【英文标题】：run JavaScript x amount times, each time number in array increase by 1

【发布时间】：2021-09-30 20:20:32

【问题描述】：

这是html，我不能直接改变DOM，但只能用JS修改属性和类之类的东西：

<div class="parent">
    <label class="child" for="label_1">
        <img src="/site/images/someimage.jpg">
    </label>
</div>
<div class="parent">
    <label class="child" for="label_2">
        <img src="/site/images/someotherimage.jpg">
    </label>
</div>
<div class="parent">
    <label class="child" for="label_3">
        <img src="/site/images/somedifferentimage.jpg">
    </label>
</div>

尝试用JS替换img src，所以src名字会匹配父for attribute的值，like

<div class="parent">
    <label class="child" for="label_1">
        <img src="/site/images/label_1.jpg">
    </label>
</div>
<div class="parent">
    <label class="child" for="label_2">
        <img src="/site/images/label_2.jpg">
    </label>
</div>
<div class="parent">
    <label class="child" for="label_3">
        <img src="/site/images/label_3.jpg">
    </label>
</div>

我有这个：

<script>
let n = ""
let amt = document.getElementsByClassName("layout-choice-thumbnail-label").length;
for (let i = 0; i <= amt; i++) 
    n += i + ', ';


var attr = document.getElementsByClassName("child")[0].getAttribute("for");
var imgSrc = '../images/content/pagebuilder/' + cardId + '.jpg';
document.querySelectorAll(".child")[0].firstElementChild.setAttribute('src', imgSrc);
</script>

它只适用于一个，我怎么能改变它，所以每次页面加载时，[0] 内的值增加 1，或者当整个脚本加载时，所有图像名称都匹配来自 @ 的 for attribute 987654328@?

【问题讨论】：

我不完全确定“当整个脚本加载时”是什么意思。你的意思是当你的页面加载脚本时？如果是这样，为什么不简单地在最后 3 行使用 for 循环，就像上面的你一样？

【参考方案1】：

这里是编辑的代码。 :)

let amt = document.getElementsByClassName("child").length;

for (let i = 0; i < amt; i++) 

    var attr = document.getElementsByClassName("child")[i].getAttribute("for")
var imgSrc = '../images/content/pagebuilder/' + attr + '.jpg';
 document.querySelectorAll(".child")[i].firstElementChild.setAttribute('src', imgSrc); 

<div class="parent">
    <label class="child" for="label_1">
        <img src="/site/images/label_1.jpg">
    </label>
</div>
<div class="parent">
    <label class="child" for="label_2">
        <img src="/site/images/label_2.jpg">
    </label>
</div>
<div class="parent">
    <label class="child" for="label_3">
        <img src="/site/images/label_3.jpg">
    </label>
</div>