0

Как сделать, чтобы при повторном нажатии на поле становилось обратно черного цвета?

То есть один клик - поле красное, ещё один - поле черное.

$('#submit').click(function() {
    $('#txt').css('background-color', 'red');
})
input {
  background-color: #000;
}
<input type="text" id="txt">
<button id="submit">Submit</button>

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

3
  • 2
    я бы предложил не менять css свойство, а делать toggleClass()
    – Reinq
    15 окт 2015 в 22:06
  • @Sergey Alekseev Я не знаю эту китайскую грамоту, но наверное что-то должно выглядеть вроде следующего $('#txt').css('background-color') === 'red' ? $('#txt').css('background-color', '#000') : $('#txt').css('background-color', 'red'); 15 окт 2015 в 22:07
  • @Reinq спасибо, то, что надо 15 окт 2015 в 22:16

3 ответа 3

2
  1. Озвученный вариант со сменой класса:

$('#submit').on("click", function() {
    $('#txt').toggleClass('clicked');
})
input {
    background-color: #000;
}

.clicked {
    background-color: red;
}
<input type="text" id="txt">
<button id="submit">Submit</button>

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

При таком варианте нужно чтобы стили для класса были "важнее" "базовых" стилей. Этого можно достичь с помощью приоритетов селекторов (например, селектор класса важнее селектора тега) или с помощью использования !important в стилях.

  1. Также можно хранить дополнительный цвет в качестве data-атрибута и менять значение с текущим местами при клике:

$('#submit').on("click", function() {
    var $txt = $('#txt');
    var currentColor = $txt.css('background-color');
    $txt.css('background-color', $txt.data('color'));
    $txt.data('color', currentColor);
})
input {
    background-color: #000;
}
<input type="text" id="txt" data-color="red">
<button id="submit">Submit</button>

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

При таком подходе не нужно думать о приоритетах стилей, равно как и код можно будет использовать для любого количества элементов.

1

Я не знаю ни JavaScript, ни jQuery, но я отвечу!:)

Я тут смастерил пример с JavaScript, используя условный оператор.

<!DOCTYPE html />

<html lang = "ru">

<body>
    <div>
        <input type = "text" id = "txt" style = "background-color: #000;"/>
        <button id = "submit">Submit</button>
   </div>

    <script>
        document.getElementById("submit").onclick = function () {
            var txtStyle = document.getElementById("txt").style;

            txtStyle.getPropertyValue("background-color") === "red" ?
            txtStyle.setProperty("background-color", "#000") :
            txtStyle.setProperty("background-color", "red");
        };

    </script>
</body>

</html>

Он работает.

Думаю, что что- то вроде этого можно сделать и на jQuery, то есть вставить условный оператор. Что-то наподобие такого:

$('#txt').css('background-color') === 'red' ? 
$('#txt').css('background-color', '#000') : 
$('#txt').css('background-color', 'red');

Конечно, лучше было бы просто менять классы, описанные в таблице CSS, у этого элемента.

0

Добавив, к примеру, флаг нажатия. Логика такова, что в начальном состоянии флаг равен true. А при нажатии становится false. И обратно. Выглядеть JS будет как-то так:

var flag = true;
$('#submit').click(function() {
    if (flag == true) {
        $('#txt').css('background-color', 'red'); 
        flag = false;
    }
    else {
        $('#txt').css('background-color', 'black'); 
        flag = true;
    }
})
2
  • Да, я опирался на то, что ТС начинающий. Хотел написать как можно очевидный код.
    – LEQADA
    16 окт 2015 в 7:26
  • Вполне может быть, что начинающий. Проблема в том, что в таком случае он, скорее всего, ещё долго так писать и будет. Но право ваше, равно как и код верный. Тогда про тернарный оператор и flag = !flag, сводящие тело функции к двум строкам, даже заикаться не буду.
    – Regent
    16 окт 2015 в 7:35

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.