조건이 충족되는 경우 하나의 요소를 사용하여 클릭을 발생시키는 방법 (하나씩 차례로)

Question

안녕하세요 메이트. 문제가 생겼습니다. 클릭했을 때 초기에 숨겨진 div를 보여주는 클릭 이벤트가 있습니다. 열린 div는 입력 양식을 가지고 있습니다

$(".coll-menu-footer input.menu-btn").click(function(e) { 
    $("div.new-coll").show();}) 
}); 

표시 할 div가 열려있을 때만 제출하려면 동일한 배 턴 요소를 사용하고 싶습니다.

질문을 이해하기 쉽도록 하나의 요소, 동일한 이벤트, 모든 불을 때마다 다른 행동을하십시오.

첫 번째 클릭 숨겨진 div 표시, 두 번째 클릭은 입력 데이터를 제출합니다. 이 가능한 동료는 어때? 갈

Answer 1

여러 가지 방법 :

1. 이 사용 jQuery의 .toggle()가 자동으로 클릭 할 때마다 다른 조치를 적용합니다.
2. 이벤트 핸들러에서 페이지의 상태 (열림/닫힘)를 검사하고이를 기반으로 수행 할 작업을 결정하십시오.
3. 첫 번째 클릭 후 첫 번째 이벤트 처리기를 제거하고 다른 작업을 수행하는 다른 작업을 설치하는 등 세 번째, 네 번째 등의 작업을 수행합니다.
4. 클릭 수 단일 이벤트 핸들러, 카운터를보고 취할 조치를 결정하십시오.

Answer 2

div가 여전히 숨겨져 있는지 확인하기 위해 JQuery를 사용할 수 있습니다. 아직도 숨겨져 있다면 보여주세요. 숨겨진 것이 아니라면 제출하십시오.

$(".coll-menu-footer input.menu-btn").click(function(e) { 
    if($("div.new-coll").is(":visible")) 
    { 
     //perform your submission code 
    } 
    else 
    { 
     $("div.new-coll").show(); 
    } 
}); 

Answer 3

버튼의 두 가지 상태를 만들 수 있습니다. 첫 번째에는 숨겨진 div가 표시되고 두 번째 상태는 양식을 제출합니다.

$(".coll-menu-footer").on('click', 'input.menu-btn:not(.clicked)', function(e) { 
    $("div.new-coll").show(); 
    $(this).addClass('clicked'); 
}); 

$(".coll-menu-footer").on('click', 'input.menu-btn.clicked', function(e) { 
    $(this).removeClass('clicked'); 
    // submit and other code here 
}); 

demo