2

私のコードがあります：

Jクエリ

$(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 の段落に重ねると、ハイライトされます。evtTarget をクリックすると、ID の強調表示がオフになります。

しかし、ユーザーが2番目にクリックすると、ハイライトがオンになります。

これどうやってするの？

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

2番目にクリックするという意味がわかりません。右クリック (マウスの二次ボタン) を意味する場合は、「右クリック」にもバインドする必要があります。もう一度クリックしたときに強調表示をオンに戻したい場合は、コードが既に強調表示されているように見えます。テキストも変更したい場合は、次のようなものをハイライト メソッドに追加します。

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 に答える