Question

我有以下代码，我想知道如果我再次点击它，如何将第一个按钮设置为白色，对于下一个按钮也是如此。所以，如果我点击它一旦它变成红色，但如果我再次点击它，它会变成白色。任何想法。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title> color divs </title>
        <meta name="author" content="Lee Middleton" />
        <meta name="keywords" content="CIS120/121/122" />
        <meta name="description" content="Template for x/html, CSS and JavaScript" />
        <style type="text/css">
            .container {
                border: 1px solid blue;
                border-radius: 10px;
                width: 100px;
                height: 50px;
            }
        </style>
        <script language="javascript">
            function changeColor(whichOne)
            {
                var thatOne = eval(whichOne);
                var element = document.getElementById(whichOne);
                var color = "ff";
                var stringColor;
                if (whichOne == 1)
                {
                    stringColor = "#" + color + "0000";
                    else {
                        alert('it was clicked') ;
                    }
                }




                }
                else if (whichOne== 2)
                {
                    stringColor = "#0000" + color;
                }
                element.style.backgroundColor = stringColor;
            }
        </script>

    <body>
        <div class='container' id='1' style='margin: 150px 0 0 75px; float: left;' onclick='changeColor(1);'></div>
        <div class='container' id='2' style='margin: 150px 0 0 175px; float: left;' onclick='changeColor(2);'></div>
        <div class='container' id='3' style='margin: 150px 0 0 220px; float: left;' onclick='changeColor(3);'></div>
    </body>
    </html>

Answer 1

正如其他解决方案所提到的那样，您可以将前一种颜色存储在变量中，以便在必要时重置它，但如果您只想将元素恢复为默认颜色，则有一种更简单的方法。

只是做：

element.style.backgroundColor = '';

这只是取消了style属性的背景颜色部分，允许使用css的颜色。

因此，要在默认颜色和颜色之间切换，您可以执行此操作：

element.style.backgroundColor = element.style.backgroundColor ? '' : '#' + color;

Answer 2

您需要在此功能之外保存按钮的先前状态，如

var prevColor = "#ffffff";
function changeColor(whichOne) {
prevColour = (this.prevColor=="#ffffff")?"#ff0000":"#ffffff";
// use this prevColour to change button colour
}

Answer 3

第1点

你有一些{}关闭问题。你的第一个if包含一个没有if的其他if。同样如果是关闭{}但是你在else之前再次关闭它

第二如果我理解正确，你可以根据它的ID来切换按钮的颜色。

我会写一些与此相似的内容

if(document.getElementById(whichOne).style.backgroundColor==COLOR1)
{
  document.getElementById(whichOne).style.backgroundColor = COLOR2
}
else
  documenet.getElementById(whichOne).style.backgroundColor = COLOR2

颜色1和颜色2以及函数中的常量，无需填充命名空间。

Answer 4

从切换事件切换背景颜色或您希望通过CSS标记操作的属性。

将此类添加到CSS

   .container {
       background-color: #d1d1d1; 
   }
   .colorMe{
       background-color: red;
   }

使用此脚本

   $(document).ready(function(){
       $('.container').on("click", function(){
           $(this).toggleClass('colorMe');
       });          
   });

HTML

   <div class='container'> Button-1 </div>
   <div class='container'> Button-2 </div>
   <div class='container'> Button-3 </div>

别忘了链接jQuery库。

以下是一个实时工作示例：JsFiddle Example

Answer 5

如果您只想改变外观，那么您应该坚持使用CSS类。正是这种类型的内联代码可以让你头疼，当你在客户希望它变成粉红色而不是白色的几个月后进行调试时。

同样关于内联事件绑定。 Javascript可以通过多种方式调用，当整个HTML中散布着很少的片段时，它很快就会成为跟踪它们的负担。

我推荐如下内容：

HTML

<div class='container green' id='1' ></div>
<div class='container blue' id='2' ></div>
<div class='container yellow' id='3'></div>

样式

.container.active { background-color:white;}

JAVASCRIPT

function changeColor(el){
    var classes = el.className.split(' '), // get the current classes
        index = classes.indexOf('active'), // see if 'active' is one of them
        hasClass = index > -1;             

     if (hasClass)
         el.className = (classes.splice(index, 1), classes.join(' ')); // remove 'active' and stringify
     else
         el.className+= " active";
}

// put all calls that require the DOM to be loaded in a function
function init(){
    var divs = document.getElementsByClassName('container'),     // get all elements that need binding
        divCount = divs.length;                                  // the length of the array for looping

    // loop through array
    while(divCount--){
        // bind each element
        // using an anonymous function wrapper to pass 'this' parameter
        divs[divCount].addEventListener('click', function() { changeColor(this) }); 
    }
}

// fire the init function once the window is loaded
window.addEventListener('load', init);

http://jsfiddle.net/NpW9X/

Answer 6

你可以试试这个：

JavaScript的：

var times = 0;
function isEven(num) {
    if (num % 2 == 0) return true;
    else return false;
}
function changeColor(whichOne) {
    if (isEven(times)) {
        document.getElementById(whichOne).style.color = 'white';
    } else {
        document.getElementById(whichOne).style.color = 'red';
    }
    times++;
}

如何将按钮恢复为原始颜色

6 个答案: