Как изменить статус jQuery toggle()

Используя toogle для отображения/скрытия div, у меня возникла проблема: когда я скрываю свой div с другой функцией, мне приходится дважды нажимать кнопку, чтобы выполнить правильное действие.

Есть ли способ изменить тумблер, как я нажал кнопку?

$('#add_task').toggle(function() { 
    if ($("#new_task_status").attr("value")==0) { 
        $("#new_task").slideDown();
        $("#new_task_status").attr("value", "1");
    }
}, function() {
    if ($("#new_task_status").attr("value")==1) { 
        $("#new_task").slideUp();
        $("#new_task_status").attr("value", "0");
    }
});


$('nav').click(function() { 
    if ($("#new_task_status").attr("value")==1) { 
        $("#new_task_status").attr("value", "0");
        $("#new_task").slideUp();
    }
});

javascript toggle jquery
person Zier Gofren Schlanum    schedule 27.05.2010    source источник

Ответы (4)


arrow_upward
1
arrow_downward

Вы можете изменить свой .toggle(), чтобы это не имело значения, например:

$('#add_task').click(function() { 
  $("#new_task").slideToggle(function() {
    $("#new_task_status").val($(this).is(':visible') ? 1 : 0);
  });
});

Вместо этого выполняется slideToggle(), поэтому текущее состояние не имеет значения... , если он показан (вы его открыли), вы получите 1 на входе, иначе вы получите 0. Кроме того, используйте .val() для настройки ввода, намного проще и универсальнее (я предполагаю, что это ввод здесь, так как это наиболее вероятно).

person Nick Craver    schedule 27.05.2010

arrow_upward
1
arrow_downward

Нет, вам придется реализовать собственную альтернативу функции toggle(), которая проверяет текущее состояние элемента.

person Sjoerd    schedule 27.05.2010

arrow_upward
0
arrow_downward

Я вообще не вижу необходимости использовать toogle. Вы можете сделать то же самое с помощью обработчика кликов:

$('#add_task').click(function() { 
    if ($("#new_task_status").attr("value")==0) { 
        $("#new_task").slideDown();
        $("#new_task_status").attr("value", "1");
    } else  {
        $("#new_task").slideUp();
        $("#new_task_status").attr("value", "0");
    }
});

а потом:

$('nav').click(function() { 
    $('#add_task').click();
});

Кстати. nav не является элементом HTML. Вы, вероятно, имели в виду #nav (может быть, просто опечатка).

И, как уже упоминал Ник, рассмотрите возможность использования .val().

person Felix Kling    schedule 27.05.2010
comment
Кстати, ваше решение скользит вверх и вниз по циклу, поэтому оно машет :) - person Zier Gofren Schlanum; 27.05.2010

arrow_upward
0
arrow_downward

Я предлагаю подход, основанный на событиях, например:

$("#add_task").bind({
    "toggle": function(e) {
    $("#add_task").trigger(($("#new_task_status").attr("value")==0) ? "open" : "close"););
},
"open": function(e) {
    $("#new_task_status").attr("value", "1");
    $("#new_task").slideDown();
},
"close": function(e) {
    $("#new_task_status").attr("value", "0");
    $("#new_task").slideUp();
}               
});

$("#nav").click(function() {
    $("#add_task").trigger("toggle");
});
person Davide Ungari    schedule 27.05.2010
comment
Это не то же самое, что и OP, нажатие на #nav всегда закрывает элемент, ваше решение заставляет меня переключать его. Вместо этого вам понадобится .trigger("close"), но это кажется очень запутанным способом не использовать преимущества уже определенных функций... - person Nick Craver; 27.05.2010