我已經在我的漫畫網站中添加了喜歡/不喜歡功能。
我爲它製作了自定義圖形。
當用戶將鼠標懸停選擇,它會改變,然後交換回退懸停......
當用戶點擊,它就會掉圖像,直到他們再次單擊相同的投票,在那裏將切換回原來的狀態。
所以,點擊過他們之前,我運行一個函數getVoteImages();
哪些查詢投票表格,看看用戶是否已經過投票。
如果他們已經投票贊成,襯衫將是綠色的,而不喜歡的襯衫將是白色的。
如果他們不滿意,不喜歡的襯衫會變成紅色,而襯衫會變成白色。如果沒有投票,這兩件襯衫都是白色的。
當懸停,下面的JavaScript會掉圖像作爲這樣的:
下面是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();
),並用更新後的投票替換原始投票圖像...因此無論是綠色襯衫還是不喜歡襯衫,或者是白色襯衫(如果未選擇)。你不能對喜歡和不喜歡的人投票。
的$不用彷徨AJAX將輸出更新的投票圖像<span id="choice"></span>
。因此,在輸出的HTML中,您可以看到隱藏的原始投票圖像style="display: none;"
,替換圖像顯示在<span id="choice"></span>
中。 這很奇怪,因爲更換圖像包括相同onmouseover
電話...
問題:
輸出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({ .....
功能?