繁体   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