как при помощи jquery поменять css свойство?

217

19 апреля 2022, 09:50

Хочу поменять цвет средствами jqery, почему меняется только на синий а красный не меняется?

<!DCCTYPE html>
<html lang='ru'>
<head>
<title>HasHa4elfi1e oOpaOOTqyjKa cpe~CTBaMl-1 jQuery.</title>
<meta charset='utf-8'>
<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript">
$(function() {
$("#id_text") .css("cursor", "pointer");
$ ("#id_text") .on("click", function() {
if($("#id_text").css("color") == "blue"){
console.log("123");
$("#id_text").css("color", "red");
}
else
console.log("what ");
$("#id_text").css("color", "blue");
  }) ;
}) ;
</script>
</head>
<body>
<p id="id_text">TecT MeHReT ueeT.</p>
</body>
</html>

Answer 1

А вы бы посмотрели, что за css("color") вам выдается и все исправили бы :)

    $(function() {
    
        $("#id_text").css("cursor", "pointer");
    
        $("#id_text").on("click", function() {
            if ($("#id_text").css("color") == "blue" || $("#id_text").css("color") == "rgb(0, 0, 255)"){
                $("#id_text").css("color", "red");
            }
            else {
                $("#id_text").css("color", "blue");
            }
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="id_text">TecT MeHReT ueeT.</p>

дело в том, что color возвращается не в виде названия цвета, а в виде rgb функции

Answer 2

Хочу поменять цвет средствами jqery

Не совсем jQuery, но если надо то поменять по названию цвета.

Вариант №1

$(function() {
  $("#id_text").css("cursor", "pointer");
  $("#id_text").on("click", function() {
    // Проверка сторокового значения
    if (document.getElementById("id_text").style.color == 'blue') {
      $(this).css("color", "red");
    } else { // Toggle
      $(this).css("color", "blue");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<p id="id_text">TecT MeHReT ueeT.</p>

Вариант №2

$(function() {
  $("#id_text").css("cursor", "pointer");
  $("#id_text").on("click", function() {
    // Проверка и изменение сторокового значения в одну строку
    $(this).css("color", document.getElementById("id_text").style.color == 'blue' ? 'red' : 'blue');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<p id="id_text">TecT MeHReT ueeT.</p>

почему меняется только на синий а красный не меняется?

if($("#id_text").css("color") == "blue"){
console.log("123");
$("#id_text").css("color", "red");
}
else // <--------------------------------------
console.log("what "); /**
Вы забыли скобки {}, так что выполняется первая строка кода,
если IF вернул отрицательный резулатат
**/
$("#id_text").css("color", "blue"); // <------------------------
/**
Эта строка кода выполняется всегда из-за чего и не работает как Вы хотите,
то есть все время синий цвет 
**/
  }) ;
}) ;