0

我有以下代码，我试图弄清楚如果我再次单击它，如何将第一个按钮设置为白色，下一个按钮也是如此。所以，如果我点击它一次它变成红色，但如果我再次点击它，它变成白色。有任何想法吗。

 <!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>
4

6 回答 6

2

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

做就是了：

element.style.backgroundColor = '';

这只是取消设置样式属性的背景颜色部分，允许使用来自 css 的颜色。

因此，要在默认和颜色之间切换，您可以这样做：

element.style.backgroundColor = element.style.backgroundColor ? '' : '#' + color;
于 2013-06-07T01:11:57.953 回答
0

如果您只想改变外观，那么您应该坚持使用 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/

于 2013-06-07T02:48:59.657 回答
0

您需要像这样在此功能之外保存按钮的先前状态

var prevColor = "#ffffff";
function changeColor(whichOne) {
prevColour = (this.prevColor=="#ffffff")?"#ff0000":"#ffffff";
// use this prevColour to change button colour
}
于 2013-06-07T01:09:01.257 回答
0

第一点

您遇到了一些 {} 闭包问题。您的第一个 if 包含一个没有与之关联的 if 的 else。这同样 if is close {} 但你在 else if 之前再次关闭它

第二，如果我理解正确，您有一个功能可以根据它的 ID 切换按钮的颜色。

我会写一些类似的东西

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

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

于 2013-06-07T01:18:33.647 回答
0

通过切换事件中的 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

于 2013-06-07T01:21:42.690 回答
0

你可以试试这个：

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++;
}
于 2013-11-28T20:42:27.407 回答