javascript - 替换图像的替代文本属性以获取段落中的文本

Question

我正在尝试获取段落“.name”中的文本并将其放入图片库中的所有 alt 属性中。我如何获取此文本并将其放入更改当前文本的属性中。例如:在 .box-product 中，产品 0001 的图像应从该段落 Box 0001

中获取替代文本，而另一个则相应地进行相同的阻止。

$(document).ready(function() {
  for (i = 0; i < document.getElementsByClassName("box-product").length; i++) {
    document.getElementsByClassName("name")[i].setAttribute(
      "alt", document.getElementsByTagName("img")[i].src);
  }
});

.box-product {
  display: inline-block;
  border: 1px gray solid;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Product Gallery -->
<div class="gallery-products">
  <!-- Product 0001 -->
  <div class="box-product">
    <a id="product" href="#" class="details">
      <p class="image">
        <img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/3_D-Box.jpg" height="100" alt="Replace this alt" id="" />
      </p>
    </a>
    <p class="name">Box 0002</p>
  </div>
  <!-- Product 0002 -->
  <div class="box-product">
    <a id="product" href="#" class="details">
      <p class="image">
        <img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/3_D-Box.jpg" height="100" alt="Replace this alt" id="" />
      </p>
    </a>
    <p class="name">Box 0002</p>
  </div>
  <!-- Product 0003 -->
  <div class="box-product">
    <a id="product" href="#" class="details">
      <p class="image">
        <img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/3_D-Box.jpg" height="100" alt="Replace this alt" id="" />
      </p>
    </a>
    <p class="name">Box 0003</p>
  </div>
</div>

Answer 1

也许你就是这个意思？

我使用 jQuery 进行所有访问 - 你的 DOM 访问中有拼写错误

$(function() {
  $(".box-product").each(function() {
    $(this).find("img").attr("alt",$(this).find("p.name").text());
  });
});

.box-product {
  display: inline-block;
  border: 1px gray solid;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Product Gallery -->
<div class="gallery-products">
  <!-- Product 0001 -->
  <div class="box-product">
    <a id="product" href="#" class="details">
      <p class="image">
        <img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/3_D-Box.jpg" height="100" alt="Replace this alt" id="" />
      </p>
    </a>
    <p class="name">Box 0002</p>
  </div>
  <!-- Product 0002 -->
  <div class="box-product">
    <a id="product" href="#" class="details">
      <p class="image">
        <img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/3_D-Box.jpg" height="100" alt="Replace this alt" id="" />
      </p>
    </a>
    <p class="name">Box 0002</p>
  </div>
  <!-- Product 0003 -->
  <div class="box-product">
    <a id="product" href="#" class="details">
      <p class="image">
        <img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/3_D-Box.jpg" height="100" alt="Replace this alt" id="" />
      </p>
    </a>
    <p class="name">Box 0003</p>
  </div>
</div>