如何更改另一個div的背景，而不影響第一個div的背景

我基本上必須使該板的數字從1到50，並且無論何時單擊一個數字，其背景都會變爲不同的顏色。我能夠通過使<div>點擊第一個做到這一點，但我不知道如何與被認爲具有值2。這裏是我的代碼，第二個做如何更改另一個div的背景，而不影響第一個div的背景

var Color = "#FF0"; 
 

 
function theFunction() { 
 
    if (Color == '#FF0') { 
 
    Color = '#F00'; 
 
    } else { 
 
    Color = '#FF0'; 
 
    } 
 

 
    document.getElementById('choose').style.backgroundColor = Color; 
 

 
}

div#gameboard { 
 
    background: #CCC; 
 
    border: #999 2px solid; 
 
    width: 1200px; 
 
    height: 900px; 
 
    margin: 70px; 
 
    margin-top: 40px; 
 
}

<div id="gameboard"> 
 
    <div id="choose" style="width:240px; height:150px; margin-left:30px; margin-top:50px; background-color:#FF0; cursor: pointer; font-size:130px; text-align:center;" onclick="theFunction();"> 
 
    1 
 
    </div> 
 
    <div id="chose" style="width:240px; height:150px; margin-left:30px; margin-top:50px; background-color:#FF0; cursor: pointer; font-size:130px; text-align:center;" onclick="theFunction();"> 
 
    2 
 
    </div> 
 
</div>

那麼我應該爲第二個div做什麼？謝謝

來源

2016-10-23 Mohammad Khawar

試試這個。

<div id="choose" style="width:240px; height:150px; margin-left:30px; margin-top:50px; background-color:#FF0; cursor: pointer; font-size:130px; text-align:center;" onclick="theFunction();">

來源

2016-10-23 21:11:03 BlackRoseGoat

我也試過，但它並沒有悲傷地工作 –

最簡單的方法是從你的「數字」的div刪除ID的，將你所有的樣式代碼CSS，並確保在this傳遞給onclick事件，所以你知道哪些號碼div被點擊。然後，您可以添加clicked類，在應用時將背景變爲紅色，並且您的JavaScript只需切換clicked類的添加/刪除。

function theFunction(e) { 
 
    e.classList.toggle("clicked"); 
 
}

#gameboard { 
 
    background: #CCC; 
 
    border: #999 2px solid; 
 
    width: 1200px; 
 
    height: 900px; 
 
    margin: 70px; 
 
    margin-top: 40px; 
 
} 
 
#gameboard div { 
 
    width: 240px; 
 
    height: 150px; 
 
    margin-left: 30px; 
 
    margin-top: 50px; 
 
    background-color: #FF0; 
 
    cursor: pointer; 
 
    font-size: 130px; 
 
    text-align: center; 
 
} 
 

 
#gameboard div.clicked { 
 
    background-color: #F00; 
 
}

<div id="gameboard"> 
 
    <div onclick="theFunction(this);"> 
 
    1 
 
    </div> 
 
    <div onclick="theFunction(this);"> 
 
    2 
 
    </div> 
 
</div>

這將僅適用於當前，現代瀏覽器。如果您需要支持較早版本的IE（即< IE10），那麼您將不得不稍微更改JavaScript以測試clicked類的存在，然後相應地添加或刪除它。

你也可以考慮使用一個框架，比如jQuery，在這個框架中你可以很容易地切換clicked類的添加/刪除，並且在框架中隱藏所有瀏覽器兼容的代碼。

來源

2016-10-23 21:35:35

首先，你得改變

onclick="theFunction();"

這個

onclick="theFunction(this);"

然後你的函數將接受一個參數

function theFunction(element) { 
    [...] 
    element.style.backgroundColor=Color; 
}

這個參數是點擊的元素。

來源

2016-10-23 21:38:38 Jelohe

如何更改另一個div的背景，而不影響第一個div的背景

回答

相關問題