1

Есть объект, к которому применяется определенный класс в зависимости от значения атрибута "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>
2
  • 1
    Что получает ф-я favoritecheck??? Ничего она не получает, вы на сигнатуру ее посмотрите. Используемый в ней favorite - это замыкание внешней переменной. Т.е. вам надо сделать как-то так: function favoritecheck (favorite) .... Хотя в этих ваших favorite запутаться можно. Я бы в функции назвал ее не favorite, а как-то newFavorite
    – BOPOH
    24 фев 2015 в 5:14
  • @VANIAN, Если вам дан исчерпывающий ответ, отметьте его как верный (нажмите на галку рядом с выбранным ответом). 24 фев 2015 в 9:19

1 ответ 1

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")
}
1
  • Спасибо за ответ, но нужно, чтобы скрипт присваивал объекту определенный класс на основе значения атрибута data (полученного из базы данных) еще до клика, а после клика изменял. При этом нужно не просто добавить класс, а изменить переменную, чтобы отправить обновленное значение на сервер. Вот пример jsfiddle.net/g865t8kv/5. Может как-то можно упростить?
    – VANIAN
    24 фев 2015 в 12:58

Ваш ответ

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

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