如何访问具有相同类名的元素的数据属性？

Question

<div class="range" data-max="100">0-100</li>
<div class="range" data-max="200">0-200</li>
<div class="range" data-max="300">0-300</li>

我希望在我的JavaScript中访问data-max。 例如，如果我单击0-200，则只会得到200。 这是我的JavaScript。

const ranges = document.querySelectorAll(".range");
for(var i = 0; i < ranges.length; i++){
    ranges[i].addEventListener('click', function(){
        console.log(this.dataset.max);
    });
}

我单击0-200时的输出是

200 100

我希望是200。

这是我的问题：
1.如示例所示，如何获得期望值--- 200。
2.我的代码中this.dataset.max的范围是什么？ 我以为它的作用范围就是功能。
3.当我将其更改为range [i]时，似乎range [i]未定义。 为什么？

guessNum.js：4未捕获的TypeError：无法读取未定义的属性'dataset'

我期待纯JavaScript的答案。 没有jquery请。

Answer 1

好吧，您的html无效，如果您对其进行修复，它将可以正常工作。
发生的情况是div相互嵌套，而click事件使div冒泡。

 const ranges = document.querySelectorAll(".range"); for(var i = 0; i < ranges.length; i++){ ranges[i].addEventListener('click', function(){ console.log(this.dataset.max); }); } 

 <div class="range" data-max="100">0-100</div> <div class="range" data-max="200">0-200</div> <div class="range" data-max="300">0-300</div> 

Answer 2

请避免问多个问题，也不要将问题改成完全不同的问题。 原来应该已经关闭，因为它只是一个简单的错字，其他问题都是重复的。

1. 我的代码中this.dataset.max的范围是什么？ 我以为它的作用范围就是功能。

这始终限于当前执行上下文。 但是，它有多种设置方式，主要是在通话中。 箭头函数采用其外部上下文的this ，可以说它是如何设置的，而不是它的范围。

使用addEventListener添加侦听器的地方， 此函数内的引用引用放置侦听器的元素。 这是不是范围，这是这是怎么设定的功能中。

请参阅“ this”关键字如何工作？

2. 当我将其更改为range [i]时，似乎range [i]是未定义的。 为什么？

因为我听众内具有封闭到原来的我 ，已递增到ranges.length并且因此引用该集合的不存在的单元。 请参阅循环内的JavaScript封闭-简单的实际示例 。