Jquery on BUTTON

Question

如何设置“ON”方法以在按钮被再次点击时撤消。所以一个ON & OFF BUTTON。

$('#videoNest span').on('click', function(e) { 

    First Time Clicked 
    //// ON 

     $('<div class="off-overlay"></div>').insertAfter('#container'); 

      $('#example_video_1').addClass("light-grad"); 

    Second Time Clicked 
    ///// OFF 

     remove div off-overlay $('<div class="off-overlay"></div>').insertAfter('#container'); 

     remove class $('#example_video_1').addClass("light-grad"); 

    }); 


    }); 

Answer 1

第一次点击后，取消绑定点击并绑定到新的OFF事件。做相同的OFF方法

  $(this).unbind("click"); 
     $(this).on("click",function() { OFFFunction(); }); 

Answer 2

您可以创建一个布尔变量并将其设置为在真=假=关闭，if语句改变它内部的，所以像：

if (boolean == true){ 
    // do stuff 
    boolean = false 
} else if (boolean == false) { 
    // do stuff 
    boolean = true 
} 

Answer 3

可以这样做下面

live demo here

$("#toggle_button").click(function(){ 
    if($("#OnOffDiv").hasClass("On")) 
    { 
     $("#OnOffDiv").removeClass("On"); 
     $("#OnOffDiv").addClass("Off"); 
     $("#OnOffDiv").html("OFF"); 
    } 
    else 
    { 
     $("#OnOffDiv").removeClass("Off"); 
     $("#OnOffDiv").addClass("On"); 
     $("#OnOffDiv").html("ON"); 
    } 
}); 

Answer 4

这里是一个工作jsfiddle example

它可能无法正确与您的要求，因此你必须改变它。只需从中获得想法。

$('#videoNest span').on('click',function(){ 
    var flg =$('#example_video_1').hasClass("light-grad"); 

    $("#container +.off-overlay").toggle('slow',function(){ 
     if(flg)$('#example_video_1').removeClass("light-grad")   
     else $('#example_video_1').addClass("light-grad")   
    });  
}); 

给定的HTML：

<div id="videoNest"> 
    <span>Toggle</span> 
    <div id="container">Container</div> 
    <div class="off-overlay">overlay</div> 
    <div id="example_video_1" > example_video_1 </div> 
</div>