运行javascript x次,每次数组中的数字增加1

vohkndzv  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(457)

这是html,我无法直接更改dom,但只能使用js修改属性和类:

  1. <div class="parent">
  2. <label class="child" for="label_1">
  3. <img src="/site/images/someimage.jpg">
  4. </label>
  5. </div>
  6. <div class="parent">
  7. <label class="child" for="label_2">
  8. <img src="/site/images/someotherimage.jpg">
  9. </label>
  10. </div>
  11. <div class="parent">
  12. <label class="child" for="label_3">
  13. <img src="/site/images/somedifferentimage.jpg">
  14. </label>
  15. </div>

尝试使用js替换 img src ,因此src名称将与父项匹配 for attribute 价值,比如

  1. <div class="parent">
  2. <label class="child" for="label_1">
  3. <img src="/site/images/label_1.jpg">
  4. </label>
  5. </div>
  6. <div class="parent">
  7. <label class="child" for="label_2">
  8. <img src="/site/images/label_2.jpg">
  9. </label>
  10. </div>
  11. <div class="parent">
  12. <label class="child" for="label_3">
  13. <img src="/site/images/label_3.jpg">
  14. </label>
  15. </div>

我有这个:

  1. <script>
  2. let n = ""
  3. let amt = document.getElementsByClassName("layout-choice-thumbnail-label").length;
  4. for (let i = 0; i <= amt; i++) {
  5. n += i + ', ';
  6. }
  7. var attr = document.getElementsByClassName("child")[0].getAttribute("for");
  8. var imgSrc = '../images/content/pagebuilder/' + cardId + '.jpg';
  9. document.querySelectorAll(".child")[0].firstElementChild.setAttribute('src', imgSrc);
  10. </script>

哪一个只对一个有效,我怎么能在每次页面加载时都更改它呢 [0] 增加1,或者当整个脚本加载时,所有图像名称都与 for attribute 从…起 <div class="parent"> ?

bpsygsoo

bpsygsoo1#

以下是已编辑的代码。:)

  1. let amt = document.getElementsByClassName("child").length;
  2. for (let i = 0; i < amt; i++) {
  3. var attr = document.getElementsByClassName("child")[i].getAttribute("for")
  4. var imgSrc = '../images/content/pagebuilder/' + attr + '.jpg';
  5. document.querySelectorAll(".child")[i].firstElementChild.setAttribute('src', imgSrc);
  6. }
  1. <div class="parent">
  2. <label class="child" for="label_1">
  3. <img src="/site/images/label_1.jpg">
  4. </label>
  5. </div>
  6. <div class="parent">
  7. <label class="child" for="label_2">
  8. <img src="/site/images/label_2.jpg">
  9. </label>
  10. </div>
  11. <div class="parent">
  12. <label class="child" for="label_3">
  13. <img src="/site/images/label_3.jpg">
  14. </label>
  15. </div>
展开查看全部

相关问题