如果检测到文本的颜色发生变化，Jquery立即更改文本的颜色

Question

我仍然是Jquery的新手，如果它检测到更改为#28a745的文本颜色代码，而我无法让它工作，我就会尝试更改文本颜色。

按钮只是一个关于颜色变化事件的例子，颜色变化可以来自任何类似于类事件，.

​

$("#change").on("click", function() {
    $("#remember-me").css("color", "#28a745");
});
if ($('#remember-me').css("color") == "#28a745"){
  $("#remember-me").css("color", "#495C83");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="change">change</button>
<div id="remember-me">some text</div>

​

希望有人能帮我！

Answer 1

如果您要问的是如何在这两种颜色之间切换颜色，那么您需要稍微修改代码。还请注意，.css("color")将返回RGB中的颜色，因此您需要转换它，或者使用RGB颜色。

就像这样：

  $("#change").on("click", function() {
    let color_1 = "rgb(40, 167, 69)";
    let color_2 = "rgb(73, 92, 131)";
    let rememberMe = $("#remember-me");
    let currentColor = rememberMe.css("color");

    // if currentColor is equal to color_1, then set it to color_2,
    // otherwise, if it's not equal to color_1, then set it to color_1
    rememberMe.css("color", 
      currentColor === color_1 ? color_2 : color_1);
  });

Answer 2

使用addClass和removeClass与hasClass一起实现您的愿望，如下所示。

​

$("#change").on("click", function() {
  $("#remember-me").addClass('yourFirstClass');
  if ($('#remember-me').hasClass('yourFirstClass')) {
    $("#remember-me")
      .removeClass('yourFirstClass')
      .addClass('yourSecondClass');
  }
  //else {
  //$("#remember-me").removeClass('yourSecondClass');
  //$("#remember-me").addClass('yourFirstClass');
  //}
});

.yourFirstClass {
  color: #28a745;
}

.yourSecondClass {
  color: #495C83;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="change">change</button>
<div id="remember-me">some text</div>

​

Answer 3

使用此脚本，您可以根据需要更改颜色。

​

 $("#change").on("click", function() {
 	var clr = $('#remember-me').css('color');
    var hex = rgb2hex(clr);
    
    
    if(hex != "#28a745"){
    	$("#remember-me").css("color", "#28a745");
    }else{
    	 $("#remember-me").css("color", "#495C83");
    }
   
});




function rgb2hex(orig){
 var rgb = orig.replace(/\s/g,'').match(/^rgba?\((\d+),(\d+),(\d+)/i);
 return (rgb && rgb.length === 4) ? "#" +
  ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : orig;
}

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

<button id="change">change</button>
<div id="remember-me">some text</div>

​