jquery click 按讚收回

jquery ajax

火爆浪子 2016-09-04 19:02:55 ‧ 3070 瀏覽

分享至

我自己嘗試做了個按讚收回功能

<button id="up_<? if (mysql_num_rows($GETthumb1)==1){echo 'back_';}?><? echo $row['timeline_id'];?>" class="n2">
                              <i <? if(mysql_num_rows($GETthumb1)==1){?>style="color:#3897F0;"<? }?> class="timeline_bottom_icon">thumb_up</i>
                              </button>

 $("#up_<? echo $row['timeline_id'];?>").unbind().click(function(){
						  $("#up_<? echo $row['timeline_id'];?>").attr("id","up_back_<? echo $row['timeline_id'];?>"); 
						  
						  $.ajax({
								type: "POST",
								url:"timeline_thumbing?to=<? echo $row['timeline_id'];?>&type=1",
								cache: false,
								success: function(){	
									
									$("#up_back_<? echo $row['timeline_id'];?>").html("<i style='color:#3897F0;' class='timeline_bottom_icon'>thumb_up</i>"); //變色表示成功
								}
							});
					  });
					  
					  $("#up_back_<? echo $row['timeline_id'];?>").unbind().click(function(){
						  $("#up_back_<? echo $row['timeline_id'];?>").attr("id","up_<? echo $row['timeline_id'];?>"); 
						 
						  $.ajax({
								type: "POST",
								url:"timeline_thumb_back_ing?to=<? echo $row['timeline_id'];?>&type=1",
								cache: false,
								success: function(){	
									
									$("#up_<? echo $row['timeline_id'];?>").html("<i class='timeline_bottom_icon'>thumb_up</i>"); //變色表示成功
								}
							});
					  });

這唯一的問題就是
當按讚後會變色沒錯資料庫有收到資料
但是當我要收回讚(up_back)時...就沒有辦法按了
必須要重新刷新後才能按收回....
是哪裡用錯了?

fillano iT邦超人 1 級 ‧ 2016-09-04 20:24:52 檢舉

unbind('click')

話說你程式這樣寫有點太複雜了XD，好好利用class吧，既可以當做「狀態」，也可以改變外觀，連id都不需要改...

火爆浪子 iT邦研究生 1 級 ‧ 2016-09-04 22:13:19 檢舉

哈哈感謝大大指示！

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

weiclin

iT邦高手 4 級 ‧ 2016-09-04 20:27:53

最佳解答

我看來看去，你大概都有弄對，應該只差一個地方。

你一開始就設定了 up_id 跟 up_back_id 的 click 事件，但是那時你只有一個 up_id 按鈕，up_back_id 還不存在，所以另一個等於沒有設定動作。以你的想法要能運作，得在 ajax 完成那邊，你改變 button id 的時候替它加上事件的動作。

但我是覺的不用這麼麻煩，只要用一個變數判斷一下目前是否已經按讚就可以了。拿你的程式改了一下，沒實際測試過，你自己試試看吧：

// html
<button id="up_<? echo $row['timeline_id'];?>" class="n2">
    <i <? if(mysql_num_rows($GETthumb1)==1){?>style="color:#3897F0;"<? }?> class="timeline_bottom_icon">thumb_up</i>
</button>


// js
var voted = <? echo (mysql_num_rows($GETthumb1)==1) ? "true" : "false";?>;
$("#up_<? echo $row['timeline_id'];?>").unbind().click(function(){
    if (!voted) {
        $.ajax({
            type: "POST",
            url:"timeline_thumbing?to=<? echo $row['timeline_id'];?>&type=1",
            cache: false,
            success: function(){
                $("#up_<? echo $row['timeline_id'];?>").html("<i style='color:#3897F0;' class='timeline_bottom_icon'>thumb_up</i>"); //變色表示成功
            }
        });
    } else {
        $.ajax({
            type: "POST",
            url:"timeline_thumb_back_ing?to=<? echo $row['timeline_id'];?>&type=1",
            cache: false,
            success: function(){
                $("#up_<? echo $row['timeline_id'];?>").html("<i class='timeline_bottom_icon'>thumb_up</i>"); //變色表示成功
            }
        });
    }
    voted = !voted;
});

如果以上都順利，你可以研究一下 jQuery 的 toggleClass，把按讚後的樣式弄成一個 CSS Class，再用 toggleClass 去開關即可，會省下更多事。