Question

所以，我有10个球具有相同的等级和不同的ID，从1到10。

<section class="stage" >
    <figure class="circle ball" id="1"><span class="shadow"></span></figure>
        </section>
        <section class="stage" >
            <figure class="circle ball" id="2"><span class="shadow"></span> 
    </figure>
        </section>
        <section class="stage" >
    <figure class=" circle ball" id="3"><span class="shadow"></span></figure>
</section>

...

如何获取数字并存储在变量中的点击ID？我尝试了querySelector，但它只获得了我的第一个匹配，然后是querySelectorAll，但它返回了nodelist ...我对js相当新，所以如果有人有一些解决方案......

提前致谢

Answer 1

使用querySelectorAll('.circle.ball')获取属于该类的所有元素，然后使用addEventListener()分配click个事件。之后，当您点击元素时，您可以按id获得this.id值。

var elem = document.querySelectorAll('.circle.ball');
for(var i=0; i<elem.length; i++){
  elem[i].addEventListener('click',clickCircle);
}

function clickCircle(){
  console.log(this.id)
}

<section class="stage" >
    <figure class="circle ball" id="1"><span class="shadow">1</span></figure>
        </section>
        <section class="stage" >
            <figure class="circle ball" id="2"><span class="shadow">2</span> 
    </figure>
        </section>
        <section class="stage" >
    <figure class=" circle ball" id="3"><span class="shadow">3</span></figure>
</section>

Answer 2

运行代码段并单击绿色框...

var balls = document.querySelectorAll('.ball');   // get all balls

balls.forEach(function(ball){  // loop over all balls to use every ball
    ball.addEventListener('click', function(){  // every ball needs to listen on "click" event
        console.log('The ball id is: ' + this.id); // when clicked log the id.
    });
});

.ball {
    background-color:green;
    margin: 10px;
    width: 40px;
    height: 40px;
    cursor: pointer;
}

<section class="stage" >
    <figure class="circle ball" id="1"><span class="shadow"></span></figure>
        </section>
        <section class="stage" >
            <figure class="circle ball" id="2"><span class="shadow"></span> 
    </figure>
        </section>
        <section class="stage" >
    <figure class=" circle ball" id="3"><span class="shadow"></span></figure>
</section>

Answer 3

＆＃13;

myFunction(item){
  console.log(item)
}

＆＃13;

document.querySelectorAll('.ball').forEach(link => {
    link.addEventListener('click', function(event) {
         console.log(event.currentTarget.id);
    });
});

＆＃13;

Answer 4

您好，可以尝试一下。

var x = document.getElementsByClassName("circle ball");
var i;
var yourId;
for (i = 0; i < x.length; i++) {
    yourId = x[i].id;
}

Answer 5

您的问题是.querySelector只返回一个元素。

要定位多个元素，您必须使用.querySelectorAll 然后，您可以使用.forEach在所有元素上添加侦听器：

＆＃13;

document.querySelectorAll('.ball').forEach(function(ball) {
  ball.addEventListener('click', function() {
    console.clear();
    console.log('You clicked id:', this.id);
  });
});

＆＃13;

.ball {
  width: 0;
  height: 0;
  border: 20px solid gray;
  border-radius: 50%;
}

＆＃13;

<section class="stage">
  <figure class="circle ball" id="1"><span class="shadow"></span></figure>
</section>
<section class="stage">
  <figure class="circle ball" id="2"><span class="shadow"></span>
  </figure>
</section>
<section class="stage">
  <figure class=" circle ball" id="3"><span class="shadow"></span></figure>
</section>

＆＃13;

希望它有所帮助。

Answer 6

在你的html中试试这个：

   ID  Range(US)   Count(US)  Mean(US)   Range(UK)  Count(UK)    Mean(UK)       
 0  690    1-3      266         4.0        1-3        186         4.0
 1         4-7      277         NaN        4-7        25          NaN
 2  354    1-3      233         2.0        1-3        44          1.0
 3         4-7      85          NaN        Nan        NaN         NaN
 4  947    1-3      156         4.0        1-3        213         3.0
 5         4-7      Nan         Nan        4-7        33          Nan

然后在你的js文件中：

onclick="myFunction(this)"

从同一个班级点击获取id

6 个答案: