Javascript querySelectorAll（列表）通过单击检索每个对象内的特定值

从querySelectorAll中，我从一个特定类中检索每个对象
（列表-全部相同，但内部有特定值…）：
-我为每个对象创建按钮（事件）
每个对象都有一个特定的值
单击一个对象时。我需要显示这个对象中包含的特定值

我目前正在用纯javascript来做这件事

我使用tree HMTL节点在内部移动并获取数据。但无论何时，只要单击这些对象，就会出现最后一个对象值

-----编辑：添加html-----

函数hello（d）
{
警报（“+d”）；
}
var Images=document.queryselectoral（'.block-image_carousel-single>figcaption'）；
对于（var i=0；i

图1
图1
图2
图3
图4

试试这个

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);
}

函数hello（f，d） { 警戒（f，d）； } var Images=document.queryselectoral（'.block-image_carousel-single>figcaption'）； 对于（var i=0；i您的代码正在覆盖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);
}

函数hello（f，d） { 警戒（f，d）； } var Images=document.queryselectoral（'.block-image_carousel-single>figcaption'）； 对于（var i=0；i删除

for循环

并使用方法为每个元素添加一个单击侦听器，并从元素内的每个

figcaption

提取

文本内容

---

检查并运行以下代码片段，以获取我上面描述的实际示例：

函数hello（d）{alert（“+d”）}
var images=document.queryselectoral（'.block-image_carousel-single>figcaption'）；
images.forEach（image=>{
image.addEventListener（'click'，函数（e）{
e、 预防默认值（）；
你好（image.textContent）；
}，假）；
});

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

您可以在事件处理程序中使用this.textContent，而不是Image.textContent。或者您可以在for循环中使用let而不是var。另一种解决方法是使用


函数hello（d）{
警报（“+d”）；
}
var Images=document.queryselectoral（'.block-image_carousel-single>figcaption'）；
对于（var i=0；i


图像0
图1
图2
图3
图4
将循环中的
var
关键字（
var i=0
）替换为
let
。。它应该做到这一点：）^..+如果要覆盖循环中的集合，请使用其他变量名。请参阅以更好地理解ymz的评论。也请发布您的HTML。
var Image=Images[i]应该是
let Image=Images[i]。。当使用var时，您正在重写同一个变量。let将允许您在内存中分配不同的空间，从而为每个内存保留原始图像引用event@ymz通过let更改var的非常好的技巧；）我将进一步了解它的返回未定义。使用提供的forEach方法AndrewL64添加了HTML和javascripttry。我想那可能行得通。