<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.当我将其更改为范围[i]时,似乎范围[i]未定义。为什么?
guessNum.js:4未捕获的TypeError:无法读取未定义的属性'dataset'
我期待纯javascript中的答案。没有jquery请。
答案 0 :(得分:2)
你的html是无效的,如果你修复它会起作用。
发生的事情是div会相互嵌套,点击事件会使div冒泡。
const ranges = document.querySelectorAll(".range");
for(var i = 0; i < ranges.length; i++){
ranges[i].addEventListener('click', function(){
console.log(this.dataset.max);
});
}
&#13;
<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>
&#13;
答案 1 :(得分:0)
请避免提出多个问题,请不要将问题更改为完全不同的问题。原文应该已经关闭,因为这是一个简单的拼写错误,其他问题是重复的。
- 我的代码中this.dataset.max的范围是什么?我认为它的范围是功能。
醇>
此始终作用于当前执行上下文。但是,它有很多种方式,主要是在通话中。箭头函数采用它们外部上下文的 this ,可以说它是如何设置的,而不是它的范围。
使用 addEventListener 添加侦听器的位置,函数中的 this 引用放置侦听器的元素。这不是关于范围,而是在函数中设置的方式。
请参阅How does the “this” keyword work?
- 当我将其更改为范围[i]时,似乎范围[i]未定义。为什么?
醇>
因为侦听器中的 i 对原始的 i 有一个闭包,它已经增加到 ranges.length ,因此引用了一个非 - 集合的存在元素。请参阅JavaScript closure inside loops – simple practical example。