Question

我正在尝试在段落“.name”中获取文本并将其放入图库中的所有alt属性中。如何获取此文本并将属性更改为当前文本。例如：在.box-product中，产品0001的图像应该从本段框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>

Answer 2

使用jQuery，

$('.box-product').each(function() {
    $(this).children('img').attr('alt', $(this).children('.name').text());
});

基本上，$('.box-product')获取所有方框。然后，您需要循环浏览每个人，从其中的孩子.name获取文字并将其分配给其子alt的{{1}}属性。

如果没有jQuery，您可以轻松使用img和querySelectorAll函数。

querySelector

没有这些功能（对于旧浏览器）：

document.querySelectorAll('.box-product').forEach(function() {
    this.querySelector('img').alt = this.querySelector('.name').innerText;
});

替换段落中获取文本的图像的alt文本属性

2 个答案: