投票按鈕 - on_hover功能不適用於$ .get結果

我已經在我的漫畫網站中添加了喜歡/不喜歡功能。

我爲它製作了自定義圖形。

當用戶將鼠標懸停選擇，它會改變，然後交換回退懸停......
當用戶點擊，它就會掉圖像，直到他們再次單擊相同的投票，在那裏將切換回原來的狀態。

所以，點擊過他們之前，我運行一個函數getVoteImages();哪些查詢投票表格，看看用戶是否已經過投票。

如果他們已經投票贊成，襯衫將是綠色的，而不喜歡的襯衫將是白色的。
如果他們不滿意，不喜歡的襯衫會變成紅色，而襯衫會變成白色。如果沒有投票，這兩件襯衫都是白色的。

當懸停，下面的JavaScript會掉圖像作爲這樣的：

enter image description here

下面是Chrome瀏覽器輸出HTML：你可以看到，onHover選項，this_hover();正確調用和影像學改變：

<img src="./images/SiteDesign/liked.png" id="like" onclick="callBoth(this.id)"> 
<img src="./images/SiteDesign/dislike_hover.png" id="dislike" onclick="callBoth(this.id)" onmouseover="this_hover(this.id)">

當AU服務器點擊，它會調用一個javascript函數，它會運行一個jQuery的$ .get AJAX調用一個likecounter.php腳本，它將加載投票到數據庫，並增加喜歡或不喜歡。這樣做首先會隱藏（$("#like, #dislike").hide();），並用更新後的投票替換原始投票圖像...因此無論是綠色襯衫還是不喜歡襯衫，或者是白色襯衫（如果未選擇）。你不能對喜歡和不喜歡的人投票。

enter image description here

的$不用彷徨AJAX將輸出更新的投票圖像<span id="choice"></span>。因此，在輸出的HTML中，您可以看到隱藏的原始投票圖像style="display: none;"，替換圖像顯示在<span id="choice"></span>中。 這很奇怪，因爲更換圖像包括相同onmouseover電話...

enter image description here

問題：

輸出HTML看起來是正確的......所以我不知道爲什麼從服務器返回結果時，懸停函數不會再次被調用。

我甚至試着把alert(id);放在測試是否從$ .get返回投票圖像時調用這些函數，並且這個ID很快就會報警。

的Javascript：

<script type="text/javascript"> 
    function this_hover(id) { 
     alert(id); 
     var images = { 
      "like": [ 
       "./images/SiteDesign/like_hover.png", 
       "./images/SiteDesign/like.png", 
      ], 
      "dislike": [ 
       "./images/SiteDesign/dislike_hover.png", 
       "./images/SiteDesign/dislike.png", 
      ] 
     } 
     $("#"+id).on({ 
      mouseenter: function() { 
       if (this.id in images) this.src = images[this.id][0]; 

      }, 
      mouseleave: function() { 
       if (this.id in images) this.src = images[this.id][1]; 
      } 
     }); 
    } 

    function callBoth(choice) { 
     likeCounter(choice); 
    } 

    function likeCounter(choice) { 

     $.get("./scripts/likecounter.php", {_choice : choice, _site : "<?php echo $site; ?>", _id : <?php echo $imgid; ?>}, 
      function(returned_data) { 
       $("#choice").html(returned_data); 
      } 
     ); 
     $("#like, #dislike").hide(); 
     $("#getlikes").hide(); 
    } 
</script>

有什麼想法，爲什麼圖像互換將無法正常工作時，點擊一票？爲什麼alert(id)工作，但不是$("#"+id).on({ .....功能？

來源

2013-03-05 Growler

原來我不應該被隱藏的原始圖像...我應該刪除他們，使鼠標懸停在隱藏圖像不從$不用彷徨更換圖片衝突：

所以這個：$("#like, #dislike").remove();

取而代之：$("#like, #dislike").hide();

來源

2013-03-05 05:34:39 Growler

投票按鈕 - on_hover功能不適用於$ .get結果

回答

相關問題