例如我有这段代码
<div class="year">
<div class="month" id="month-1"></div>
<div class="month" id="month-2"></div>
<div class="month" id="month-3"></div>
<div class="month" id="month-4"></div>
<div class="month" id="month-5"></div>
<div class="month" id="month-6"></div>
<div class="month" id="month-7"></div>
<div class="month" id="month-8"></div>
<div class="month" id="month-9"></div>
<div class="month" id="month-10"></div>
<div class="month" id="month-11"></div>
<div class="month" id="month-12"></div>
</div>
<script>
document.querySelector(".month").addEventListener("click",function (){
//here I need to add some code
}
</script>
在“我需要添加一些代码”的地方,我想写这样的东西
仅使单击元素的颜色变为蓝色
但是如果我用
this.style.color="blue"
它将在所有div.month中添加该样式。
例如,如果我单击ID为
month-1
的元素,则只希望该特定元素更改颜色。**所有答案都是正确的!如何选择所有要正确的东西? **
最佳答案
就像Titus所说的那样,querySelector只返回匹配的第一个元素,如果要获取所有与类名匹配的元素,我们使用getElementsByClassName
。然后,我们遍历返回的集合以绑定侦听器。
var Months = document.getElementsByClassName("month");
for (var i = 0; i < Months.length; i++) {
Months[i].addEventListener('click', function() { this.style.color = "#ff0000"; }, false);
}
.month { height: 30px; }
<div class="year">
<div class="month" id="month-1">1</div>
<div class="month" id="month-2">2</div>
<div class="month" id="month-3">3</div>
<div class="month" id="month-4">4</div>
<div class="month" id="month-5">5</div>
<div class="month" id="month-6">6</div>
<div class="month" id="month-7">7</div>
<div class="month" id="month-8">8</div>
<div class="month" id="month-9">9</div>
<div class="month" id="month-10">10</div>
<div class="month" id="month-11">11</div>
<div class="month" id="month-12">12</div>
</div>