时间戳

首页 > 解决方案 > querySelectorAll (list) 通过单击检索每个对象内的特定值

javascript - querySelectorAll (list) 通过单击检索每个对象内的特定值

问题描述

从 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 获取图像。

标签： javascripthtml

解决方案

删除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>

推荐阅读