पहले एक बटन पर एक बटन दूसरे

Question

पर दूसरे पर क्लिक करें, मैं एक बटन दो jquery कार्यों को करने के लिए चाहता हूं। पहले क्लिक पर दूसरा दूसरा क्लिक पर दूसरा क्लिक करता है। यहां दो बटन के लिए कोड है। क्या कार्यों को गठबंधन करने का कोई तरीका है? इस तरह

<input type="button" value="View Page" onclick="ViewPage()" /> 

<script type="text/javascript"> 
function ViewPage() { 
example_animate('-=50%'); 
$("#mainContent").toggle(); 
} 
</script> 

<input type="button" value="View Menu" onclick="ViewMenu()" /> 

<script type="text/javascript"> 
function ViewMenu() { 
example_animate('+=50%'); 
$("#mainContent").toggle(); 
} 
</script> 

Answer 1

कोशिश कुछ - DEMO

var action = 1; 

$("input").on("click", viewSomething); 

function viewSomething() { 
    if (action == 1) { 
     $("body").css("background", "honeydew"); 
     action = 2; 
    } else { 
     $("body").css("background", "beige"); 
     action = 1; 
    } 
} 

तो अपने मामले में यह one विधि का उपयोग किया जाएगा

function viewSomething() { 
    if (action == 1) { 
     example_animate('-=50%'); 
     action = 2; 
    } else { 
     example_animate('+=50%'); 
     action = 1; 
    } 
    $("#mainContent").toggle(); 
} 

Answer 2

एक और तरीका है, दोनों को सक्रिय कर देगा केवल एक बार

$("input").one("click", viewSomething); 
function viewSomething() 
{ 
    $("body").css("background", "honeydew"); 
    $("input").one("click", function(){ // on can be used 
     $("body").css("background", "beige"); 
    }); 
} 

DEMO।

अद्यतन: आप दूसरी हैंडलर जीवित रखने के लिए चाहते हैं, तो onthis one की तरह साथ one बदलें।

Answer 3

आप सूचकांक को ट्रैक करने के data के साथ अपने कार्य करता है और एक काउंटर स्टोर करने के लिए एक सरणी इस्तेमाल कर सकते हैं। यह बहुत लचीला है क्योंकि आप जितना चाहें उतने कार्यों को जोड़ सकते हैं और अगर आप क्लिक करते रहें तो यह लूप होगा।

डेमो:http://jsbin.com/ehatoj/2/edit

var funcs = [ 
    function one() { alert('one'); }, 
    function two() { alert('two'); }, 
    function three() { alert('three'); } 
]; 

$('button') 
    .data('counter', 0) // begin counter at zero 
    .click(function() { 
    var counter = $(this).data('counter'); 
    funcs[ counter ](); 
    $(this).data('counter', counter < funcs.length-1 ? ++counter : 0); 
    }); 

Answer 4

आप एक वर्ग अपने बटन के लिए परीक्षण दोनों कार्यों में अगर बटन इस वर्ग है या नहीं जोड़ सकता है तो आप जानते हैं कि बटन क्या करना चाहिए, और फिर। बेशक आप भी viewMenu() में वर्ग, कि jQuery v1.8.3 में इस प्रकार दिखाई देगा हटाने की आवश्यकता होगी: ..

<input id="toggle-view" type="button" value="View Menu" class="view-page" /> 

$('#toggle-view').on('click', function() 
{ 
    var button = $(this); 

    if (button.hasClass('view-page') ) 
    { 
     ViewPage(); 
     button.removeClass('view-page'); 
    } 
    else 
    { 
     ViewMenu(); 
     button.addClass('view-page'); 
    } 
}); 

Answer 5

तुम भी HTML तत्व को नाम निर्दिष्ट कर सकते हैं

<input type="button" value="Click me" onclick = 'viewSomething(this)'/>   
<script> 
    function viewSomething(e){ 

     //First time click 
     if(e.name != 'Click'){ 
      e.name = "Click"; 
      <!--do whatever..--> 
     }//end if 

     //When click it again.. 
     else if(e.name == 'Click'){ 
      e.name = "Unclick"; 
      <!--do whatever--> 
     }//end else 
    }//end function 
</script>