单击时切换按钮颜色[重复]答案

【问题标题】：Toggle button color on click [duplicate]单击时切换按钮颜色[重复]
【发布时间】：2014-03-05 07:08:18
【问题描述】：

在这里我写了一个JavaScript 来在单击一次时将按钮的颜色更改为绿色，当我再次单击该按钮时，它的颜色应该变回橙色。按钮的默认颜色是橙色。我已经给出了rgb 的颜色值。但是，当我单击该按钮时，它的颜色从橙色变为绿色，当我再次单击它时，它的颜色保持绿色，不会变回橙色。请帮我解决这个问题。

<script>
function colorchange(id)
{

  var background = document.getElementById(id).style.background;

  if(background = "rgb(255,145,0)")
  {
  document.getElementById(id).style.background = "rgb(26,255,0)";
  }
  if(background == "rgb(26,255,0)")
  {
    document.getElementById(id).style.background = "rgb(255,145,0)";
  }

}
</script>

这里是输入按钮的 HTML 代码

<input type="button" name="Ignore Select" value="Ignore Select" id="select" onclick="colorchange('select')" style="background:rgb(255,145,0);"/>
<input type="button" name="Ignore Delete" value="Ignore Delete" id="select1" onclick="colorchange('select1');" style="background:rgb(255,145,0);"/>
<input type="button" name="Ignore Insert" value="Ignore Insert" id="select2" onclick="colorchange('select2');" style="background:rgb(255,145,0);"/>
<input type="button" name="Ignore Update" value="Ignore Update" id="select3" onclick="colorchange('select3');" style="background:rgb(255,145,0);"/>
<input type="button" name="Ignore Sleep" value="Ignore Sleep" id="select4" onclick="colorchange('select4');" style="background:rgb(255,145,0);"/>

【问题讨论】：

试试这个代码jsfiddle.net/ku2Ye/2

标签： javascript jquery html

【解决方案1】：

应该是if(background == "rgb(255,145,0)")

使用比较运算符== 而不是赋值=

function colorchange(id) {

    var background = document.getElementById(id).style.backgroundColor;
    if (background == "rgb(255, 145, 0)") {
        document.getElementById(id).style.background = "rgb(26,255,0)";
    } else {
        document.getElementById(id).style.background = "rgb(255,145,0)";
    }

}

演示：Fiddle

由于使用了jQuery标签

<input type="button" name="Ignore Select" value="Ignore Select" id="select" class="select" />
<input type="button" name="Ignore Delete" value="Ignore Delete" id="select1" class="select" />
<input type="button" name="Ignore Insert" value="Ignore Insert" id="select2" class="select" />
<input type="button" name="Ignore Update" value="Ignore Update" id="select3" class="select" />
<input type="button" name="Ignore Sleep" value="Ignore Sleep" id="select4" class="select" />

然后

.select {
    background:rgb(255,145,0);
}
.select.highlight {
    background:rgb(26, 255, 0);
}

和

jQuery(function ($) {
    $('.select').click(function () {
        $(this).toggleClass('highlight')
    })
})

演示：Fiddle

【讨论】：

不，不是切换回颜色。
@Felix 是的 -- 对我来说这是疯狂的一天 - jsfiddle.net/arunpjohny/fL7X8/2
嗯，我现在看不到任何颜色变化。有人可以确认吗？只有我吗？

【解决方案2】：

JS FIDDLE

jQuery：

$(":button").on('click', function () {
    var gValue = $(this).attr('class');
    if (gValue == 'orange') {
        $(this).removeClass("orange");
        $(this).addClass("red");
    } else {
        $(this).removeClass("red");
        $(this).addClass("orange");
    }
});

CSS：

.red {
    background-color:red;
}
.orange {
    background-color:orange;
}

【讨论】：

【解决方案3】：

您应该使用comparison 运算符而不是assignment 运算符

if(background = "rgb(255,145,0)")

到

if(background == "rgb(255,145,0)")

//

 <script>
    function colorchange(id)
{

  var background = document.getElementById(id).style.backgroundColor;

  if(background == "rgb(255, 145, 0)")
  {
  document.getElementById(id).style.backgroundColor = "rgb(26,255,0)";
  }
  if(background == "rgb(26, 255, 0)")
  {
    document.getElementById(id).style.backgroundColor = "rgb(255,145,0)";
  }

}
    </script>

DEMO

【讨论】：

【解决方案4】：

为什么不使用 css 作为背景颜色？ http://jsfiddle.net/

HTML：

<input type="button" name="Ignore Select" value="Ignore Select" id="select" onclick="colorchange('select')" class="classA" />

    <script>
        function colorchange(id)
    {
      var el = document.getElementById(id);
      var currentClass = el.getAttribute("class");
      if(currentClass == 'classA')
      {
          el.setAttribute("class", "classB");
      } else {
         el.setAttribute("class", "classA");
      }

    }
    </script>

CSS：

.classA {
    background:rgb(255,145,0);
}

.classB {
   background:rgb(26,255,0); 
}

【讨论】：

【解决方案5】：

我会这样写：

btn 是你的按钮

var background = document.getElementById(id).style.background;
var btn = addEventListener("click", function (){
    if(background = "rgb(255,145,0)"){
        document.getElementById(id).style.background = "rgb(26,255,0)";
    }
    else
    {
        document.getElementById(id).style.background = "rgb(255,145,0)";
    }
});

【讨论】：

【解决方案6】：

我的方法：

var eButton = document.querySelectorAll("button");
var isPink = false;//using white and pink in this example

eButton.addEventListener("click", function(){
   if(isPink){
      document.body.style.background = "white";
    }
   else{
      document.body.style.background = "pink";
    }
   isPink = !isPink; //switches between true and false
    });

或

为背景编写css并使用classList属性

.pink{
background : pink;
}

JS

eButton.addEventListener("click", function(){
   document.body.classList.toggle("pink");
});

【讨论】：