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

时间:2017-06-26 23:37:47

标签: javascript html

<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请。

2 个答案:

答案 0 :(得分:2)

你的html是无效的,如果你修复它会起作用。
发生的事情是div会相互嵌套,点击事件会使div冒泡。

&#13;
&#13;
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;
&#13;
&#13;

答案 1 :(得分:0)

请避免提出多个问题,请不要将问题更改为完全不同的问题。原文应该已经关闭,因为这是一个简单的拼写错误,其他问题是重复的。

  
      
  1. 我的代码中this.dataset.max的范围是什么?我认为它的范围是功能。
  2.   

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

使用 addEventListener 添加侦听器的位置,函数中的 this 引用放置侦听器的元素。这不是关于范围,而是在函数中设置的方式。

请参阅How does the “this” keyword work?

  
      
  1. 当我将其更改为范围[i]时,似乎范围[i]未定义。为什么?
  2.   

因为侦听器中的 i 对原始的 i 有一个闭包,它已经增加到 ranges.length ,因此引用了一个非 - 集合的存在元素。请参阅JavaScript closure inside loops – simple practical example