Не работает hasClass, хотя класс задан

287

09 августа 2017, 22:05

Есть HTML:

<input type="button" id="a1" class="add">
<span id="price"></span>

и переменные a1 = 350 и sum = 0.

При клике меняю класс:

$('#a1').click(function() {
    sum += a1;
    $('#price').html("Цена: " + sum);
    $('#a1').removeClass('add');
    $('#a1').addClass('del');
});

Потом проверяю наличие класса и при клике меняю его обратно на старый:

if ($("#a1").hasClass('del')) {
    $('#a1').click(function() {
        sum -= a1;
        $('#price').html("Цена: " + sum);
        $('#a1').removeClass('del');
        $('#a1').addClass('add');
    });
}

Но второй код (где я класс назад меняю) не работает. Почему?

Answer 1

Потому что, судя по коду, проверку на наличие класса del вы делаете сразу же, а не при клике на #a1. Соответственно, так как изначально класса del у элемента нет, то и второй обработчик события click к элементу не добавляется.

Имеет смысл добавить один обработчик события click на #a1, а внутри обработчика выполнять тот или иной код, основываясь на наличии класса у #a1:

var sum = 0; 
var a1 = 350; 
 
$("#a1").on("click", function() { 
    var sign = $(this).hasClass("add") ? 1 : -1; 
    sum += sign * a1; 
    $("#price").text("Цена: " + sum); 
    $(this).toggleClass("add del"); 
});

.add { 
  background-color: green; 
} 
.del { 
  background-color: red; 
}

<span id="price">Цена: 0</span> 
<input type="button" id="a1" class="add" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>