связать и открепить проблему для второго клика - PullRequest
Новая
       37

связать и открепить проблему для второго клика

2 голосов
/ 17 сентября 2011

Вот мои коды:

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 idhighligt.И если вы нажмете evtTarget ID, подсветка будет отключена.

Но я хочу, чтобы при повторном выделении клика по пользователю был включен.

Как я могу это сделать?

Ответы [ 3 ]

0 голосов
/ 17 сентября 2011

Я не уверен, что вы подразумеваете под щелчком во-вторых.Если вы имеете в виду щелчок правой кнопкой мыши (вторичная кнопка мыши), вам также нужно привязать «щелчок правой кнопкой мыши».Если вы имеете в виду, что вы хотите, чтобы подсветка снова включалась при повторном нажатии, ваш код уже выполняет подсветку.Если вы просто хотите изменить текст, вы можете просто добавить что-то вроде этого в свой метод выделения: 

if$("#evtTarget").html().indexOf("Off") == 1){
    $("#evtTarget").html("On. Click for Off.");
} else {
    $("#evtTarget").html("Off. Click for On.");
}
0 голосов
/ 17 сентября 2011

Вы можете использовать метод .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");
}
0 голосов
/ 17 сентября 2011

попробуйте этот 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 () .

...