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 = '';

これは、スタイル属性の background-color 部分の設定を解除するだけで、css の色を使用できるようになります。

したがって、デフォルトと色を切り替えるには、次のようにするだけです。

element.style.backgroundColor = element.style.backgroundColor ? '' : '#' + color;
于 2013-06-07T01:11:57.953 に答える
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 に答える
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;}

ジャバスクリプト

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

1点目

{} の閉鎖に問題があります。最初の if には、if が関連付けられていない else が含まれています。これと同じ if は {} を閉じますが、else if の前に再度閉じます

2番目私が正しく理解していれば、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 の例

于 2013-06-07T01:21:42.690 に答える