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，则突出显示将关闭。

但我想如果用户点击其次突出显示已开启。

我该怎么做？

Answer 1

试试这个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，则删除“normal”类，该类使mouseover和mouseleave事件无效。如果他们再次点击，只需恢复“正常”课程。

您可以在live()找到该功能的文档。

Answer 2

我不确定你的意思是第二次点击。如果您的意思是右键单击（鼠标左键），您还需要绑定到“右键单击”。如果您的意思是在第二次单击时希望重新突出显示，则代码已经显示为突出显示。如果您只想更改文本，您只需要将这样的内容放入高亮显示方法中：

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

Answer 3

您可以使用.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");
}

绑定和取消绑定问题，然后再单击

3 个答案: