iT邦幫忙

0

jquery click 按讚 收回

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

<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 }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

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 去開關即可,會省下更多事。

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

感謝你的方向!

我要發表回答

立即登入回答