jquery檢查是否被點擊，否則這樣做

Question

爲什麼它忽略點擊並進入else語句？任何幫助表示讚賞！

<div id="boxauto"> <a id="boxclose">X</a> error </div> 

<script> 
    window.setTimeout(function(){ 
     $('#boxauto').delay(50).animate({'top':'0'},200); 

     var hasBeenClicked = false; 
     jQuery('#boxclose').click(function(){ 
      hasBeenClicked = true; 
     }); 
     if(hasBeenClicked) { 
      $('#boxauto').animate({'top':'-50em'},500); 
     } else { 
      $('#boxauto').delay(5000).animate({'top':'-50em'},500); 
     } 
    }); 
</script> 

Answer 1

您正在分配單擊偵聽器並在完全相同的時間檢查結果，因此這兩個代碼塊都會立即執行。

hasBeenClicked因此總是錯誤的，因爲在if語句被調用之前，您的鏈接無法被點擊。

---

閱讀您的意見後，這是你所需要的：

var hasBeenClicked = false; 

// do this as soon as the doc is ready 
$(document).ready(function() { 

    // move your box into it's intial position 
    $('#boxauto').delay(50).animate({'top':'0'},200); 

    // listen for the click 
    jQuery('#boxclose').click(function() { 
     // on click, set the flag and move the box 
     hasBeenClicked = true; 
     $('#boxauto').animate({'top':'-50em'},500); 
    }); 

}); 

// after five seconds, move the box if it wasn't moved already 
window.setTimeout(function(){ 
    if (!hasBeenClicked) { 
     $('#boxauto').animate({'top':'-50em'},500); 
    } 
}, 5000); 

Answer 2

您正在綁定超時處理程序。用戶從來沒有機會點擊按鈕。做到這一點，而不是：

<div id="boxauto"> <a id="boxclose" href="#">X</a> error </div> 

<script> 
var hasBeenClicked = false; 

jQuery('#boxclose').click(function(e){ 
    hasBeenClicked = true; 
    e.preventDefault(); 
}); 

window.setTimeout(function(){ 
    $('#boxauto').delay(50).animate({'top':'0'},200); 

    if(hasBeenClicked) { 
     $('#boxauto').animate({'top':'-50em'},500); 
    } else { 
     $('#boxauto').delay(5000).animate({'top':'-50em'},500); 
    } 
}); 
</script> 

注意，你實際上並沒有給人一種時間到setTimeout通話。我認爲默認值是400ms。我懷疑用戶將能夠快速點擊按鈕。

我也注意到你沒有<a>的參考。你需要給它一個href='#'，所以它知道不要去任何地方。並使用e.preventDefault()來防止鏈接實際導航。