Question

https://codepen.io/SmileySteven/pen/pdBYdv?editors=1111

function test(){
  var span = document.querySelectorAll('span');
  for(var i = 0 ; i <= span.length ;i++){
    span.addEventListener('click', function(){
    this.style.backgroundColor === '#ffffff'? this.style.backgroundColor = 'yellow'
         : this.style.backgroundColor="#000000";                          
   })
 }
}
test();

大家好，我试图在点击时改变我的跨度的背景颜色，但它似乎不起作用 - 关心指导我做错了什么？我已将所有范围设置为#ffffff

的背景颜色

Answer 1

span.addEventListener('click', function(){

您正在将事件设置为整个跨度集合。您应该设置为单个元素

span[i].addEventListener('click', function(){

https://codepen.io/anon/pen/LOvamO?editors=1111

Answer 2

function test(){
  var span = document.querySelectorAll('span');
  
  span.forEach((item)=>{
    item.addEventListener('click',()=>{
      let styles = getComputedStyle(item);
      styles.backgroundColor == 'rgb(255, 255, 255)' ? item.style.backgroundColor = 'yellow' : item.style.backgroundColor = 'black';
    });
  });
}
test();

.def.def2{
  background-color:orange
}

div#ya{
  background-color:purple
}

span{
  
  background-color:#ffffff
}

<input type="text" id="i1">   </input>
<input type="text" id="i2">   </input>
<input type="number" id="i3">   </input>
<button id="btn">  sad </button>
<div> Div1  </div>

<div class="def def2"> div2 </div>
<div id="ya" class="def def2 def3 omg"> div2 </div>
<p> sad </p>

<span > test </span><span> test </span><span> test </span>

我建议forEach使用querySelectorAll()。

而且，如果您想获得background-color的价值，最好使用getComputedStyle()。

但是，getComputedStyle().backgroundColor始终返回rgb()，因此您必须使用rgb()。

Answer 3

1 - JavaScript总是伪装 白色背景 从HTML null 用于印刷目的。

所以如果你想要匹配的背景是白色的 然后替换：

this.style.backgroundColor === '#ffffff' ? ..... etc ;

用这个：

this.style.backgroundColor === "" ? this.style.backgroundColor = 'yellow'
     : this.style.backgroundColor="#000000";

另外，如果你想要匹配的背景是不白色
然后你可以使用正常 element === " color code here "

这个条件

2 - 最后正如其他人提到的那样在你的跨度回调之前添加循环，如下所示：

span[i].addEventListener('click', function(){ ... etc

Answer 4

添加上述答案，我还建议在文档就绪时运行测试。

$( document ).ready(test);

使用修复程序更新了codepen：https://codepen.io/TheRodeo/pen/pdBYVJ

单击时更改跨度的颜色

4 个答案: