更改按鈕數據提示文本（從

收到這是我的HTML代碼更改按鈕數據提示文本（從

<form class="addtowatchlistform" action="logo/insertwatchlist.php" method="POST"> 

    <input type="hidden" name="tmdb_id" value="'.$result[$x]["tmdb_id"].'"/> 
    <button id="addtowatchlistbutton" type="submit" name="tmdb_id" value="'.$result[$x]["tmdb_id"].'" data-tooltip="ADD TO YOUR WATCHLIST" class="material-icons" style="color:'.$watchlisticoncolor.'">add_box</button> 

</form> 

    // Same form as above 
<form class="addtowatchlistform" action="logo/insertwatchlist.php" method="POST"> 

    <input type="hidden" name="tmdb_id" value="'.$result[$x]["tmdb_id"].'"/> 
    <button id="addtowatchlistbutton" type="submit" name="tmdb_id" value="'.$result[$x]["tmdb_id"].'" data-tooltip="ADD TO YOUR WATCHLIST" class="material-icons" style="color:'.$watchlisticoncolor.'">add_box</button> 

</form>

jQuery代碼：

<script> 
$(".addtowatchlistform").submit(function(e) { 
    var data = $(this).serialize(); 
    var url = $(this).attr("action"); 
    var form = $(this); // Add this line 
    $.post(url, data, function(data) { 
    try { 
     data = JSON.parse(data); 
     $(form).children("button").css('color',data.watchlisticoncolor); 
     $(form).children("button").data('tooltip', data.addremove + " TO YOUR WATCHLIST"); // This line not working 
    } catch (e) { 
     console.log("json encoding failed"); 
     return false; 
    } 
}); 
    return false; 
}); 
</script>

PHP文件insertwatchlist.php文件

$response = new \stdClass(); 
$response->addremove = "REMOVE";//you can get the data anyway you want(e.g database) 
$response->watchlisticoncolor = "red"; 
die(json_encode($response));

輸出的PHP文件insertwatchlist.php文件

{"addremove":"REMOVE","watchlisticoncolor":"red"}

預期結果：

1）當用戶點擊按鈕add_box，它提交表單，而不重新加載頁面（這一個正常工作）

2）當有人點擊add_box按鈕，這是color的變化。（工作正常）

3.）當有人點擊add_box按鈕時，data-tooltip=""值發生變化。（這一個不工作）

所以第三點不按預期工作，我的JQuery代碼有什麼問題？控制檯選項卡是空的，它什麼也不顯示。

來源

2017-07-20 Toby

嘗試'$（形式）。兒童（「按鈕」）。ATTR（ '數據工具提示'，data.addremove +「到你的手錶名單」）;' –

你確定它不工作？您是否嘗試提醒'$（form）.children（「button」）。data（「tooltip」）;'？ – icecub

jQuery代碼應該是這樣的

$(form).children("button").attr('data-tooltip',data.addremove + "TO YOUR WATCHLIST");

或

$('.material-icons').attr('data-tooltip',data.addremove + "TO YOUR WATCHLIST");

來源

2017-07-20 06:13:50 Pritamkumar

請不要告訴別人它應該是什麼東西，實際上他的代碼是完全有效的：https：//api.jquery.com/data/ - 很可能他正在檢查他的頁面的源代碼，看看它的值在那裏改變，哪（afaik）沒有發生。 – icecub

好吧我明白我應該wriiten'jquery代碼可以像這樣' – Pritamkumar

所以只需編輯你的答案。嘗試解釋爲什麼你認爲jQuery代碼可以工作，而他卻沒有。這樣未來的讀者可以從您的經驗中學習。而且你肯定會從我這裏得到一個+1 :) – icecub

更改按鈕數據提示文本（從

回答

相關問題