JQuery Переключить государственный

Question

Вот быстрый и тощий моего вопроса:

$("a").toggle(function() { /*function A*/ }, function() { /*function B*/ });

Внутри function A отображается форма. Если пользователь успешно завершил форму, форма снова скрыта (возвращается в исходное состояние).

Внутри function B такая же форма скрыта.

Теория заключается в том, что пользователь может отображать форму и заполнять ее, или они могут снова щелкнуть и вернуть форму обратно в сокрытие.

Теперь мой вопрос заключается в следующем: в настоящее время, если пользователь заполняет форму успешно - и она уходит в подполье - пользователь должен щелкнуть по ссылке дважды перед возвращением в состоянии переключения, что отображает форму.

Есть ли в любом случае программный сброс тумблера в исходное состояние?

Answer 1

JQuery имеет два метода: .toggle()

.toggle()

Toggles каждый из набора соответствующих элементов. Если они показываются, переключатель делает их скрытыми. Если они скрыты, toggle показывает их.

.toggle(even, odd)

Переключение между двумя вызовы функций любой другой мыши.

В этом случае вы хотите первый. Нечто подобное должно сделать трюк:

$("a").click(function() { 
    $("#theForm").toggle(); 
}); 

Answer 2

Ahh, это простые вещи в жизни ...

Я использовал последнее определение toggle(even,odd);, но я забыл включить в моем оригинальном описании проблема в том, что моя вторая функция переключения не только скрывала форму, но и уничтожала ее.

function A: Ajax загружает форму в прилагаемый div. Скрыть и уничтожить div на успешной почтой формы.

function B: Уничтожьте div.

Вы оба напомнили мне, что toggle(); использует только свойство CSS, и поэтому он не подходит для этой задачи. Но потом я понял, что я был излишне повторной загрузки формы на каждом «нечетный» состояние, уничтожая его, когда мне было сделано, так что я в конце концов вернулся к этому:

$("link").click(function() { 
    if ($(this).siblings(".form-div").length == 0) { 
     // form is not loaded; load and show the form; hide when done 
    } 
    else { 
     $(this).siblings(".form-div").toggle(); 
    } 
});

... который делает то, что я хочу это делать. Спасибо, что поставили меня прямо около toggle();!

Answer 3

Вот что я использовал:

$(document).ready(function() { 
    $('#listing_position').click(function() { 

    var div_form = $('#listing_position_input'); 
     if (div_form.hasClass('hide')) { 
      div_form.removeClass('hide'); 
     } else { 
      div_form.addClass('hide'); 
     } 
    }); 
}); 

Answer 4

Ходила с этим, чтобы избежать дополнительного скрыть/показать класс. Я думаю, что это является более гибким, чем решение Foxy, как вы можете добавить больше функций внутри, но не цитируйте меня, что я нуб

$("#clickie").click(function(){ 
    if ($("#mydiv").css("display") == "none"){ 
    $("#mydiv").show(); 
     } else { 
     $("#mydiv").hide(); 
} 

Answer 5

Вы можете проверить состояние переключателя в JQuery с помощью .is(":hidden") , Таким образом, в основном коде, что я использовал:

$("#div_clicked").click(function() { 
    if ($("#toggle_div").is(":hidden")) { 
    // do this 
    } else { 
    // do that 
} 
}); # add missing closing 

Answer 6

$("#div_clicked").click(function() { 
    if ($("#toggle_div").is(":visible")) { 
    // do this 
    } else { 
    // do that 
} 

Replace скрыты с видимым