jQuery切換懸停檢測

Question

我在我的網站上有一個按鈕，我想用它來打開和關閉描述框。所以當單擊按鈕時，我希望它在您將鼠標懸停在頁面上的某些元素上時顯示圖像預覽，但是當取消選擇此按鈕時，它不應顯示任何圖像預覽。

我創建了一個jQuery函數，並根據圖像預覽窗口是否應該顯示將其傳遞給布爾值。 。然而，這似乎是懸停功能（$（「節點」）懸停（函數（E））無論布爾被稱爲什麼我做錯了

$('.textIcon').click(function(){ 

     if(textCount %2 == 0){ 
         // show preview images 
      imagePreview("true"); 
      textCount++; 
     } 
     else{ 
      // hide preview images 
      imagePreview("false"); 
      textCount++; 
     } 
    }); 

jQuery腳本：

。

<script> 
// create pop up preview box for each step when text labels are off 
this.imagePreview = function(on){ 

    console.log("in imagePreview, on: " + on); 

    /* CONFIG */  
     xOffset = 50; 
     yOffset = 140; 

     // these 2 variable determine popup's distance from the cursor 
     // you might want to adjust to get the right result 

    /* END CONFIG */ 

    if(on=="true"){ 
     console.log("ON"); 
     $(".node").hover(function(e){ 
      console.log("node hover"); 
      // title of step 
      this.t = $(this).data('title'); 
      this.title = ""; 
      // image url of step 
      this.href = $(this).data('image'); 
      // show title + image for preview 
      if(this.href != null){ 
       var c = (this.t != "") ? this.t + "<br>": ""; 
       $("body").append("<p id='preview'>" + c + "<img src='"+ this.href +"' alt='Image preview' style='margin-top:5px' />" +"</p>"); 
      } 
      // just show title for preview 
      else{ 
       var c = (this.t != "") ? this.t : ""; 
       $("body").append("<p id='preview'>"+ c +"</p>");  
      } 

      $("#preview") 
       .css("top",(e.pageY - xOffset) + "px") 
       .css("left",(e.pageX + yOffset) + "px") 
       .fadeIn("fast");       

     }, 
     function(){ 
      this.title = this.t;  
      $("#preview").remove(); 
     }); 

     $(".node").mousemove(function(e){ 
      var dotPosition = $(this).position(); 
      $("#preview") 
       .css("top",(dotPosition.top + xOffset) + "px") 
       .css("left",(dotPosition.left + yOffset) + "px"); 
     }); 
     } 
}; 
</script> 

Answer 1

您分配功能，每次你打電話imagepreview（懸停事件），而不是嘗試一次分配懸停事件，並檢查裏面是否應該顯示預覽或不

試着這麼做：

var showOnHover = false; // determines behaviour 

$('.textIcon').click(function(){ showOnHover = !showOnHover; }); // change behaviour onclick 

// we assign it once 
$(".node").hover(function(e){ 
    // we look if we need to do something now 
    if (showOnHover){ 
     // onHover activated 
     // do your stuff 
    } 
    // else shouldn't show 
});