从querySelectorAll我从特定的类(列表-都相同,但内部具有特定的值...)检索每个对象:
-我为每个对象创建按钮(事件)
-每个对象都有特定的值
-单击一个对象时。我需要显示此对象内包含的特定值。

我目前正在使用纯JavaScript

我使用树HMTL节点移动到内部并获取数据。但是只要点击这些对象,就只会出现最后一个对象值...

-----编辑:添加了html -----



function hello(d)
{
alert("" + d);
}

var Images = document.querySelectorAll('.block-image_carousel-single > figcaption');

for (var i = 0; i < Images.length; i++) {

var Image = Images[i];

Image.addEventListener('click', function (event) {

    event.preventDefault();

    hello(Image.textContent);
}, false);
}

<div class="block-image_carousel">
<div>
   <div class="block-main-image_carousel-display">
      <img src="img.png" class="block-image_carousel-display">
      <figcaption> Image 1 </figcaption>
   </div>
   <div class="block-image_carousel-single">
      <img src="img.png">
      <figcaption> Image 1 </figcaption>
   </div>
   <div class="block-image_carousel-single">
      <img src="img.png">
      <figcaption> Image 2 </figcaption>
   </div>
   <div class="block-image_carousel-single">
      <img src="img.png">
      <figcaption> Image 3 </figcaption>
   </div>
   <div class="block-image_carousel-single">
      <img src="img.png">
      <figcaption> Image 4 </figcaption>
   </div>
</div>
</div>






单击一个对象时。我需要显示此对象内包含的特定值。
但是只要点击这些对象,就只会出现最后一个对象值...


解答:使用let代替var来获取图像。

最佳答案

删除for loop并改用forEach()方法向每个元素添加点击侦听器,并从元素内部的每个textContent中提取figcaption



检查并运行以下代码片段,以获取上述内容的实际示例:



function hello(d) { alert("" + d) }

var images = document.querySelectorAll('.block-image_carousel-single > figcaption');

images.forEach(image => {
  image.addEventListener('click', function(e) {
    e.preventDefault();
    hello(image.textContent);
  }, false);
});

<div class="block-image_carousel">
  <div>
    <div class="block-main-image_carousel-display">
      <img src="https://picsum.photos/1000/200" class="block-image_carousel-display">
      <figcaption> Image 1 </figcaption>
    </div>
    <div class="block-image_carousel-single">
      <img src="https://picsum.photos/100/100">
      <figcaption> Image 1 </figcaption>
    </div>
    <div class="block-image_carousel-single">
      <img src="https://picsum.photos/100/100">
      <figcaption> Image 2 </figcaption>
    </div>
    <div class="block-image_carousel-single">
      <img src="https://picsum.photos/100/100">
      <figcaption> Image 3 </figcaption>
    </div>
    <div class="block-image_carousel-single">
      <img src="https://picsum.photos/100/100">
      <figcaption> Image 4 </figcaption>
    </div>
  </div>
</div>

关于javascript - querySelectorAll(列表)通过单击来检索每个对象内的特定值,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/54222795/

10-10 14:45
查看更多