Question

从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>

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

ANSWER：对图像使用let代替var。

Answer 1

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

Answer 2

尝试一下

function hello(f,d)
{
    alert(f,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(this, Image.textContent);
    }, false);
}

Answer 3

您的代码正在覆盖for循环中的“ Images”变量，并且仅循环中的最后一个实例被保存到Images中。您也定义过两次图像吗？

尝试将您的代码修改为此：

   function hello(f,d)
{
alert(f,d);
}

var Images = document.querySelectorAll('.block-image_carousel-single > figcaption');
for (var i = 0; i < Images.length; i++) {

Images[i].addEventListener('click', function (event) { 
event.preventDefault();

hello(this, Images.textContent);
},false);
}

Answer 4

您的问题是变量作用域，当for循环结束时，变量包含最后一个值。

您可以在事件处理程序中使用 this.textContent ，而不是 Image.textContent 。也可以在for循环中使用 let 代替var。解决此问题的另一种方法是使用IIFE

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(this.textContent);
    }, false);
}

//
// ...loop using let
//
for (let i = 0; i < Images.length; i++) {
    var Image = Images[i];
    Image.addEventListener('click', function (event) {
        event.preventDefault();
        hello(Images[i].textContent);
    }, false);
}

<div class="block-image_carousel">
    <div>
        <div class="block-image_carousel-single">
            <img src="/media/images/irbOgrandOparis-17-png_956449_1505405590__B-.max-940x640.png" class="block-image_carousel-display">
            <figcaption> Image 0 </figcaption>
        </div>
        <div class="block-image_carousel-single">
            <img src="/media/images/irbOgrandOparis-17-png_956449_1505405590__B-.max-940x640.png">
            <figcaption> Image 1 </figcaption>
        </div>
        <div class="block-image_carousel-single">
            <img src="/media/images/irbOgrandOparis-17-png_956449_1505405590__B-.max-940x640.png">
            <figcaption> Image 2 </figcaption>
        </div>
        <div class="block-image_carousel-single">
            <img src="/media/images/irbOgrandOparis-17-png_956449_1505405590__B-.max-940x640.png">
            <figcaption> Image 3 </figcaption>
        </div>
        <div class="block-image_carousel-single">
            <img src="/media/images/irbOgrandOparis-17-png_956449_1505405590__B-.max-940x640.png">
            <figcaption> Image 4 </figcaption>
        </div>
    </div>
</div>

querySelectorAll（列表）通过单击

4 个答案: