2

有我的代码：

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

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

我怎样才能做到这一点？

4

3 回答 3

0

试试这个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()中查看该函数的文档。

于 2011-09-17T02:11:48.927 回答
0

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

if$("#evtTarget").html().indexOf("Off") == 1){
    $("#evtTarget").html("On. Click for Off.");
} else {
    $("#evtTarget").html("Off. Click for On.");
}
于 2011-09-17T02:12:44.630 回答
0

您可以使用.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");
}
于 2011-09-17T02:18:08.933 回答