jquery - 按钮上的 Jquery

Question

当再次单击按钮时，如何设置“ON”方法以撤消。所以一个开和关按钮。

 $('#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

您可以创建一个布尔变量并将其设置为 true = on 和 false = off 并在 if 语句中对其进行更改，例如：

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

Answer 3

这是一个有效的 jsfiddle示例

它可能与您的要求不完全相似，您必须对其进行更改。只是从中得到想法。

$('#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>

Answer 4

您可以执行以下操作

现场演示在这里

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