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

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,

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

基本上，$('.box-product') 得到了所有的盒子。然后你需要遍历每个，从它的子 .name 获取文本并将它分配给它的子 img.

的 alt 属性

如果没有 jQuery，您可以使用 querySelectorAll 和 querySelector 函数轻松实现相同。

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

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

var products = document.getElementsByClassName('box-product');
for(i in products) {
    var product = products[i];
    product.getElementsByTagName('img')[0].setAttribute('alt', product.getElementsByClassName('name')[0].innerText);
}

Answer 2

也许你是这个意思？

我使用 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>

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

Replace alt text attribute of images getting text in paragraph

javascript

attributes

alt