二次点击的绑定和解绑问题

Question

有我的代码：

Jquery

$(function() {
                $("#evtTarget").bind("mouseover",highlighted);
                $("#evtTarget").bind("mouseleave",highlighted);

                $("#evtTarget").bind("click",function(){
                    $("#evtTarget").unbind("mouseover",highlighted);
                    $("#evtTarget").unbind("mouseleave",highlighted);
                    $("#evtTarget").html("Off.Click for On.");

                    });
        });

        function highlighted(evt){
                $("#evtTarget").toggleClass("highlighted");
            }

Html

<h1>Binding Event Example</h1>
<div id="evtTarget" class="normal">On. Click for Off.</div>

Css

normal {
        width:300px;
        height:200px;
        background-color:red;
        font-size:18pt;
        color:black;
   }
.highlighted {
       background-color:white;
}

如果您将鼠标悬停在 evtTarget id 段落 highligt 上。如果您单击 evtTarget id 突出显示将关闭。

但我想如果用户点击第二次突出显示。

我该怎么做？

Answer 1

您可以使用 .data 方法 (api) 来保存是否不突出显示的是：

$(function() {
    $("#evtTarget").bind("mouseover",highlighted)
        .bind("mouseleave",highlighted)
        .data("isOn", true);

    $("#evtTarget").bind("click",function(){

        if($(this).data("isOn")) {
            $("#evtTarget")
               .unbind("mouseover",highlighted)
               .unbind("mouseleave",highlighted)
               .removeClass("highlighted")
               .html("Off:   Click for On.")
               .data("isOn", false);

        } else {
            $("#evtTarget")
               .bind("mouseover",highlighted)
               .bind("mouseleave",highlighted)
               .addClass("highlighted")
               .html("On:   Click for Off.")
               .data("isOn", true);                        
        }
   });
});

function highlighted(evt){
    $("#evtTarget").toggleClass("highlighted");
}

Answer 2

我不确定你所说的第二次点击是什么意思。如果您的意思是右键单击（鼠标辅助按钮），您还需要绑定到“右键单击”。如果您的意思是希望在第二次单击时重新突出显示，那么您的代码似乎已经进行了突出显示。如果您只想更改文本，则只需将类似的内容放入突出显示方法中：

if$("#evtTarget").html().indexOf("Off") == 1){
    $("#evtTarget").html("On. Click for Off.");
} else {
    $("#evtTarget").html("Off. Click for On.");
}

Answer 3

尝试这个 javascript：

<script type="text/javascript">
$(function() {
  $(".normal").live("mouseover", highlighted);
  $(".normal").live("mouseleave", highlighted);

  $("#evtTarget").toggle(
    function() {
      $(this).toggleClass("normal");
      $(this).html("Off.Click for On.");
    },
    function() {
      $(this).toggleClass("normal");
      $(this).html("On. Click for Off.");
    }
  );
});

function highlighted(evt){
  $("#evtTarget").toggleClass("highlighted");
}
</script>

让 jQuery 为您完成工作，而不是手动管理可突出显示的状态。如果用户单击 div，请删除“正常”类，该类会使 mouseover 和 mouseleave 事件无效。如果他们再次点击，只需恢复“正常”类别即可。

您可以在 live() 中查看该函数的文档。