Некорректное выполнение условий функции

Рейтинг: 1Ответов: 1Опубликовано: 24.02.2015

Есть объект, к которому применяется определенный класс в зависимости от значения атрибута "data". Задача в том, чтобы реализовать возможность изменения класса при клике на него. Все срабатывает только один раз, при повторном нажатии на объект ничего не происходит, хотя функция favoritecheck значение переменной получает.

<div id="favorite" data="1"></div>

<script>
$(document).ready(function () {
    var favorite = $("#favorite").attr("data");  // Присвоение переменной значения из data
    favoritecheck (favorite);  // Направление переменной в функцию favoritecheck

function favoritecheck () {
    if (favorite == 0) {          // Функция добавляет класс объекту исходя из значения переменной
        $("#favorite").addClass("favorite0");}
    else {
        $("#favorite").addClass("favorite1");};
    //alert(favorite);
};

$("#favorite").click(function (){
    if (favorite == 0) {favorite = 1} // Изменение значения переменной при клике на объект
    else {favorite = 0};
favoritecheck (favorite);  // Направление переменной в функцию favoritecheck 
});
});
</script>
javascript jquery
Источник: Stack Overflow на русском

Ответы

▲ 1

Я думаю, это всё стоит упростить одной функцией при клике.

$("#favorite").click(function(){
    f = $("#favorite").attr("data");
    if(f==="0") {
        $(this).attr("data", "1");
        $(this).addClass("favorite0");
    } else {
        $(this).attr("data", "0");
        $(this).addClass("favorite1");
    }
});

А еще посмотрите .toggleClass(), возможно, он Вам лучше подойдет, если изначально допускается присваивание класса, это всё можно просто записать в одну строку:

HTML:

<div id="favorite" class="favorite0"></div>

JS:

$("#favorite").click(function(){
     $(this).toggleClass("favorite0").toggleClass("favorite1")
}