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

Используйте 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 2

Используя этот скрипт, вы можете менять цвет по своему усмотрению.

 $("#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>

Answer 3

Если вы спрашиваете, как переключать цвет между двумя цветами, вам нужно будет немного изменить свой код. Также обратите внимание, что .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);
  });