•  04-07-2019
  •  | 
  •  

문제

다음은 내 문제의 빠르고 스키니입니다.

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

내부에 function A 양식이 표시됩니다. 사용자가 양식을 성공적으로 완료하면 양식이 다시 숨겨져 있습니다 (원래 상태로 돌아 가기).

내부에 function B 같은 형태가 숨겨져 있습니다.

이에 대한 이론은 사용자가 양식을 표시하고 채우도록 선택하거나 다시 클릭하여 양식을 숨기게 할 수 있다는 것입니다.

이제 내 질문은 다음과 같습니다. 현재 사용자가 양식을 성공적으로 작성하고 숨어 가면 사용자는 링크를 클릭해야합니다. 두 배 양식을 표시하는 토글 상태로 돌아 가기 전에.

어쨌든 토글 스위치를 초기 상태로 프로그래밍 방식으로 재설정 할 수 있습니까?

도움이 되었습니까?

해결책

jQuery에는 두 가지가 있습니다 .toggle() 행동 양식:

.toggle()

일치하는 요소의 각 세트를 토글합니다. 그들이 보여지면, 토글은 숨겨집니다. 그들이 숨겨져 있으면 토글이 표시됩니다.

.toggle(even, odd)

두 함수 사이를 전환하면 다른 클릭마다 호출됩니다.

이 경우 첫 번째를 원합니다. 이와 같은 것은 트릭을 수행해야합니다.

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

다른 팁

사용하여 jQuery의 토글 상태를 확인할 수 있습니다. .is(":hidden"). 기본 코드에서 내가 사용한 내용 :

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

내가 사용한 것들은 다음과 같습니다.

$(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');
        }
    });  
});

아, 인생의 단순한 것들 ...

나는 후자의 정의를 사용하고 있었다 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();!

추가 숨기기/쇼 클래스를 피하기 위해 이것과 함께 갔다. 나는 이것이 더 많은 기능을 추가 할 수 있기 때문에 Foxy의 솔루션보다 유연하다고 생각하지만 나는 멍청하다는 것을 인용하지 않습니다.

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

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

숨겨진 것을 가시로 교체하십시오

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top