如何使用 JQuery 切换 CSS？

Question

我想添加每次点击都会改变的 css。 但我在 jquery 中找不到这样的东西。 如何使用 jquery 执行此操作？

我希望你每次都点击背景颜色。 我知道如何使用 toggleClass 来做到这一点。 但我想通过添加 css 来做到这一点。 单击按钮时背景变为红色。 我希望它在再次单击时改变。 我必须使用.css 来执行此操作，而不是 ToggleClass。

 $(function() { var a = 0; $('.mob-channel-title').click(function() { $(".content").css("background", "red"); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="mob-channel-title">Click me</div> <div class="content">Content here</div>

Answer 1

如果我理解正确，您想在“红色”和默认背景之间切换背景； 在这种情况下，一种简单的方法是将a变量替换为跟踪背景 state 的新background变量以实现您的要求：

 $(function() { var background; $('.mob-channel-title').click(function() { // Compute next background based on current background background = background === "red"? "": "red" // Apply newly updated background to.content $(".content").css("background", background); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="mob-channel-title">Click me</div> <div class="content">Content here</div>

Answer 2

ToggleClass 是首选方式，但试试这个

 $(function() { let a = 0; const colors = ["red", "green", "blue"]; $('.mob-channel-title').on("click", function() { $(".content").css("background", colors[a++]); if (a >= colors.length) a = 0; }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="mob-channel-title">Click me</div> <div class="content">Content here</div>

Answer 3

不确定您的意思是希望颜色从白色切换到红色，还是每次都想要一种新颜色。 所以这里都使用.css

 $(function() { var a = 0; $('.mob-channel-title').click(function(e) { let color = $(".content").css('background'); $(".content").css("background", color.includes('rgb(255, 0, 0)')? 'white': 'red'); }); }); $(function() { var a = 0; $('.random-color').click(function(e) { const r = parseInt(Math.random() * 255); const g = parseInt(Math.random() * 255); const b = parseInt(Math.random() * 255); $(".content").css("background", `rgb(${r}, ${g}, ${b})`); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="mob-channel-title">Click me</div> <div class="random-color">Random Color</div> <div class="content">Content here</div>