使用 jQuery 在单击时更改背景颜色

Using jQuery to change background color on click

本文关键字：背景 颜色 jQuery 单击 使用      更新时间：2023-09-26

我是jQuery的新手，我已经通读了有关此主题的线程，但是我在理解逻辑时遇到了一些麻烦，并且在重写代码后，我仍然无法使其工作。

我有两个按钮，我希望每个按钮在单击时更改背景颜色和文本颜色。这是我的jsfiddle的链接

任何反馈或建议将不胜感激。谢谢！

jQuery(document).ready(function() {
    $("#footer").on("click", "#purple', function() {
       $(this).css("background-color", "#9683ec");
       $(this).css("color", "#2d2746");
    });
    $("footer").on("click", "#blue', function() {
       $(this).css("background-color", "#00bfff");
       $(this).css("color", "#002633");
    });
});

小提琴演示

click事件正在寻找id为 #purple 或 #blue 的后代，但在这两种情况下都没有。

从 on 函数的 jQuery 文档中：

提供选择器时，事件处理程序称为 委托。当事件直接发生在 绑定元素，但仅适用于 匹配选择器。jQuery 将事件从事件目标向上冒泡 到附加到处理程序的元素（即，最里面的 最外层元素），并沿该元素运行任何元素的处理程序 与选择器匹配的路径。

使用span将按钮中的文本换行并在范围上设置id值将起作用。

此外，您似乎没有针对点击事件定位body，因此background-color不会按预期更改。

.HTML 

<footer>
  <button><span id="purple">Purple</span></button>
  <button><span id="blue">Blue</span></button>
  <p>&copy;Allison Harris 2016</p>
</footer>

j查询：

jQuery(document).ready(function() {
  $("button").on("click", "#purple", function() {
    $('body').css("background-color", "#9683ec");
  });
  $("button").on("click", "#blue", function() {
    $('body').css("background-color", "#00bfff");
  });
});

您在"#purple'中有一个拼写错误，"#blue'在同一字符串中使用单 qoute 和双引号，您应该选择其中之一：

$("#footer").on("click", "#purple", function() {
//OR
$("#footer").on("click", '#purple', function() {

您也可以使用以下命令同时附加多个 css：

$(this).css({ "background-color": "#9683ec", "color": "#2d2746" })

而不是：

$(this).css("background-color", "#9683ec");
$(this).css("color", "#2d2746");

最后，您错过了ID选择器登录#：

$("footer").on("click", "#blue", function() {
__^

完整代码 ：

jQuery(document).ready(function() {
    $("#footer").on("click", "#purple", function() {
         $(this).css({ "background-color": "#9683ec", "color": "#2d2746" })
    });
    $("#footer").on("click", "#blue", function() {
         $(this).css({ "background-color": "#00bfff", "color": "#002633" })
    });
});

希望这有帮助。

这是

你可以做到的。试试这个 

<!DOCTYPE html>
    <html>
    <head>
    <title>hover</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <style type="text/css">
      body{
        margin:0;
        padding:0;
      }
   div.myclass{
    width: 100px;
    height: 100px;
    background-color: orange;
   }
  
  #mybotton{
    background-color: orange;
    color: black;
  }
    </style>
    </head>
    <body>
     <div class="myclass"></div>
     <br/>
     <button id="mybotton">my button</button>
   <script type="text/javascript">
   $(document).ready(function(){
    $(".myclass").click(function(){
      $(this).css({"background-color":"red"});
    });
    $("#mybotton").click(function(){
      $(this).css({"color":"white", "background-color":"red"});
    });
   });
   </script>
    </body>

    </html>

试试这个解决方案

jQuery(document).ready(function() {
    
    $("#purple").click(function() {
       $(this).css("background-color", "#9683ec");
   });
   $("#blue").click(function() {
       $(this).css("background-color", "#00bfff");
   });
});
body {
	font-family: sans-serif;
	font-size: 1.2em;
  color: #091232;
	background-color: #00ced1;
  text-align: center;
}
button {
  border-radius: 20%;
	background-color: #ffff33;
  font-color: #000000;
  font-size: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<title>#bothcats</title>
<body>
  <h1>Toph and Oscar</h1>
  <div id="container">
    <h2>#bothcats</h2>
    <img src="http://i.imgur.com/rEn4Ze8.png" style="max-width:80%">
    <p>Toph and Oscar are the ultimate duo.</p>
    <h2>You decide</h2>
    <p>Would you like to see them on blue or purple? Make your choice below.</p>
  </div>
</body>
<footer>
  <button id="purple">Purple</button>
  <button id="blue">Blue</button>
  <p>&copy;Allison Harris 2016</p>
</footer>

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
        </script>
        <style>
        body
        {
            text-align: center;
        }
        div
        {
            margin: auto;
            width: 200px;
            height: 100px;
            background-color: #ccc;
        }
        </style>
    </head>
    <body>
        <div class="myclass"></div>
        <br />
        <button id="purple">Purple</button>
        <button id="blue">Blue</button>
        <script>
            $(document).ready(function()
            {
                $("#purple").on('click', function()
                {
                    $('div').css("background-color", "purple");
                });
                $("#blue").on('click', function()
                {
                    $('div').css("background-color", "blue");
                });
            });
        </script>
    </body>
</html>
相关文章：