Question

按下按钮时如何在两种颜色之间动态更改？

Example: 
Press button = yellow
Press button = red
Press button = yellow
Press button = red
...



$('button').click(function(){
    $(this).css('color', 'yellow');
    ...
});

Answer 1

您需要通过应用类或在变量中保持单击状态来保持状态。

$("button").on("click", function () {
    $(this).toggleClass("red yellow");
});

.red { background-color: red; }
.yellow { background-color: yellow; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="red">click</button>

或只是一个班级

$("button").on("click", function () {
    $(this).toggleClass("yellow");
});

button { background-color: red; }
.yellow { background-color: yellow; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click</button>

如果你真的想使用.css（）而不是你需要保存状态

的变量

(function () {

  var state = false;
  $("button").on("click", function () {
      state = !state;
      $(this).css("backgroundColor", state ? "red" : "yellow");
  }).trigger("click");
  
}());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click</button>

Answer 2

这样的事可能。基本上你要设置一个当前颜色的变量。每次点击它都会切换颜色。 IF 起始颜色为红色，然后您将var yellowon = true;行更改为var yellowon = false;

var yellowon = true;
$('button').click(function(){
    if (yellowon) {
        $(this).css('color', 'red');
        yellowon = false;
    }
    else {
        $(this).css('color', 'yellow');
        yellowon = true;
    }
    ...
});

Answer 3

css中的颜色以mysqli_real_escape_string()格式返回。您可以使用此示例进行更改：

rgb

$('button').click(function(){
  if ($(this).css('color') == 'rgb(255, 255, 0)') {
    $(this).css('color', 'rgb(255, 0, 0)');
  } else {
    $(this).css('color', 'rgb(255, 255, 0)');
  }
});

如何在JQuery中动态更改颜色？

3 个答案: