簡體   English   中英

jQuery更改Div的顏色

[英]JQuery changing colour of Div

我的Javascript / jQuery有點生銹,因此這可能非常明顯,但是,我有一個div,希望它在單擊時可以更改顏色,我可以使用

$(".MyClass").on("click", function()
{
    $(this).css("background", "#0077af");
});

現在,我嘗試將其合並到布爾if語句中,以便在單擊時它會更改顏色,然后在再次單擊時它會變回原來的顏色,依此類推,等等,但是現在不執行任何操作。

<script>
boolean clicked = false;
$(".League").on("click", function()
{
  if(clicked == false)
  {
     $(this).css("background", "#0077af");
     clicked = true;
  }
  else
  {
    $(this).css("background", "#00aeff");
    clicked = false;
  }
});
</script>

我對Java的了解比對Java的了解更強,對jQuery的了解非常有限,所以請不要太復雜:)

更改您的變量初始化語句

boolean clicked = false;

var clicked = false;

最好使用"backround-color"而不是"background"

JavaScript 用於更換<div>按下按鈕的顏色</div><div id="text_translate"><p>當我的 html 和 JS 代碼在同一個文件中時,我有點不確定為什么我的代碼似乎不起作用。 當 html 和 JS 分開時,似乎工作正常。 有人可以指出我的錯誤....我是新手!</p><p> <strong>HTML:</strong></p><pre> &lt;div class="main"&gt; &lt;div class="light"&gt;&lt;/div&gt; &lt;button onclick="chngCol()" id="burn"&gt;Burn!&lt;/button&gt; &lt;/div&gt;</pre><p> <strong>JavaScript:</strong></p><pre> chngCol() { if(document.getElementByClass('light').style.background == "#00ffff") { document.getElementByClass('light').style.background = "#ffff00"; } else if(document.getElementByClass('light').style.background == "ffff00") { document.getElementByClass('light').style.background = "#ff00ff"; } else if(document.getElementByClass('light').style.background == "#ff00ff") { document.getElementByClass('light').style.background = "#00ffff"; } }</pre><p> <strong>CSS:</strong></p><pre> .light{ width: 50px; height: 50px; background-color:#00ffff; }</pre><p> 所有代碼都在同一個文檔中,帶有適當的標簽,但是我在第一個 { 調用 chngCol.</p></div>

[英]JavaScript for changing a <div> colour from a button press

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用jQuery更改div的顏色 使用jQuery更改div的背景色 div顏色在.animate()中不變 使用JS更改Div的顏色 使用JQuery動態更改AwesomeIcon的顏色 在jQuery中使用CSS更改文本顏色 javascript遍歷div更改背景顏色 使用 React 中的按鈕單擊更改 div 顏色樣式 JavaScript 用於更換<div>按下按鈕的顏色</div><div id="text_translate"><p>當我的 html 和 JS 代碼在同一個文件中時,我有點不確定為什么我的代碼似乎不起作用。 當 html 和 JS 分開時,似乎工作正常。 有人可以指出我的錯誤....我是新手!</p><p> <strong>HTML:</strong></p><pre> &lt;div class="main"&gt; &lt;div class="light"&gt;&lt;/div&gt; &lt;button onclick="chngCol()" id="burn"&gt;Burn!&lt;/button&gt; &lt;/div&gt;</pre><p> <strong>JavaScript:</strong></p><pre> chngCol() { if(document.getElementByClass('light').style.background == "#00ffff") { document.getElementByClass('light').style.background = "#ffff00"; } else if(document.getElementByClass('light').style.background == "ffff00") { document.getElementByClass('light').style.background = "#ff00ff"; } else if(document.getElementByClass('light').style.background == "#ff00ff") { document.getElementByClass('light').style.background = "#00ffff"; } }</pre><p> <strong>CSS:</strong></p><pre> .light{ width: 50px; height: 50px; background-color:#00ffff; }</pre><p> 所有代碼都在同一個文檔中,帶有適當的標簽,但是我在第一個 { 調用 chngCol.</p></div> jQuery mouseenter函數-如果顏色尚未更改,則更改顏色
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM