jquery / javascript - как «отменить» событие нажатия, используя оператор if?

Question

jquery / javascript - как «отменить» событие нажатия, используя оператор if?

0

В приведенном ниже коде учитываются разные теги и при кратковременном включении фона становится красным. Я хочу закодировать его так, чтобы, если он снова щелкнут, он изменится с красного на красный, "удалит" фон или, по крайней мере, установит его в null. Я пробовал использовать if-инструкцию безрезультатно. Я знаю, что я могу просто сделать другое событие клика, которое меняет фон на белый, но это для экспериментальных целей, и мне было интересно, можно ли это сделать с операторами if. благодаря тебе.

<script>
    $(document).ready(function() {
        $("p, h1").click(function() {
            $(this).css("background-color", "red");
            if ($(this).css("background-color", "red")) {
                $(this).css("background-color", "null");
            }
        });
    });
</script>

user3342341 23 фев. 2014, в 05:03

Источник

Теги:

javascript

jquery

3 ответа

2

$('p, h1').click(function() {

    var $this    = $(this);
    var altColor = $this.data('altColor');

    $this.css('background-color', altColor ? '' : 'red');

    $this.data('altColor', ! altColor);
});

Это отвечает на ваш вопрос, но для этого вам действительно нужно использовать класс CSS.

Joseph Silber 23 фев. 2014, в 02:19

0

Это легко сделать с помощью CSS и немного более прямолинейно. Если вы создаете класс CSS для клика, вы можете включать или отключать его каждый раз, когда нажимается элемент:

CSS

p, h1 {
    background-color: none;
}

p.red, p.h1 {
    background-color: red;
}

JavaScript:

$('p, h1').click(function() {
    $(this).toggleClass('red');
});

Bic 23 фев. 2014, в 01:36

Ещё вопросы

Arun P Johny · Accepted Answer · 2014-02-23T00-46-00.000Z

Сначала вам нужно использовать геттерную версию.css() как

if($(this).css("background-color") == "red"){

но он все равно не будет работать, потому что css getter вернет значение формата rgb и вернет несовместимые значения в браузерах.

Таким образом, решение заключается в использовании решения на основе css, использующего toggleClass()

.red {
    background-color: red;
}

тогда

$(document).ready(function() {

   $("p, h1").click(function() {

      $(this).toggleClass("red");

   });

});

Демо: скрипка