javascript - 尝试使用 getElementsByName 切换某些 p 标签的颜色

Question

这就是我所拥有的，但我不知道如何将不同的 id 定位为橙色

function toggleColor(){
    document.getElementsByName("color").style.color = 'blue';
    document.getElementById().style.color = 'orange';
}


<ul>
    <li><p id="skg"name="color" onclick="toggleColor();">SKG</p></li>
    <li><p id="tech" name="color" onclick="toggleColor();">Tech</p></li>
    <li><p id="upd" name="color" onclick="toggleColor();">UPD</p></li>
</ul>

Answer 1

在 HTML 中附加 javascript 事件是一种非常糟糕的做法，因此我建议使用该addEventListener函数来执行此操作。您将获得相同的结果，但使用干净的 HTML 和易于重用和维护的代码。

HTML

<ul>
    <li><p name="colors" id="skg">SKG</p></li>
    <li><p name="colors" id="tech">Tech</p></li>
    <li><p name="colors" id="upd">UPD</p></li>
</ul>

JS

var colors = document.getElementsByName('colors');
for (var i = 0; i < colors.length; i ++ ){
  colors[i].addEventListener('click', toggleColor);
}

function toggleColor(){
  for (var i = 0; i < colors.length; i ++ ){
    colors[i].style.color = 'blue';
  }
  this.style.color = 'orange';
}

CSS

p { 
 color: blue;
}

看看这个代码笔。

Answer 2

我更喜欢 jQuery，但如果你不想这样做，你可以这样做：

http://jsfiddle.net/zjv1euqx/

<script>
    function toggleColor(e){
        if(e.style.color == 'blue'){
             e.style.color = 'orange';
        }else{
             e.style.color = 'blue';
        }
    }
</script>

<ul>
    <li><p id="skg" onclick="toggleColor(this);">SKG</p></li>
    <li><p id="tech" onclick="toggleColor(this);">Tech</p></li>
    <li><p id="upd" onclick="toggleColor(this);">UPD</p></li>
</ul>

Answer 3

您是否尝试过 jQuery？

jQuery(".color").click(function(){
   if(jQuery(this).hasClass("blue"))
      jQuery(this).removeClass("blue").addClass("orange");
   else
      jQuery(this).removeClass("orange").addClass("blue");
});