使用JQuery更改TwitterButton屬性值

Question

我在嘗試使用Twitter按鈕訪問數據文本字段時遇到問題。 我試圖根據用戶的一些選擇來自定義文本。 我使用JQuery嘗試訪問錨點的文本，但總是返回未定義的文本。 我不確定為什么我似乎無法訪問錨字段中的值。

 $(document).ready(function() { $("#TweetCounties").change(function() { var seletedCounty = $('#TweetCounties :selected').text(); var seletedValue = $('#TweetCounties').val(); if (seletedValue !== "0") { //ALL undefined var tweet = $('.twitter-hashtag-button').data("text"); var tweetButton = $('.twitter-hashtag-button').text(); var tweetButtonNew = $('#twitterButton2').text(); var tweetButtonNew1 = $('.twitterButton').text(); var test = $('#tweetButton a'); } }); }); 

 <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> <div class="tweetButtonLaytout"> <a id="twitterButton" class="twitter-hashtag-button" href="https://twitter.com/intent/tweet?button_hashtag=Test" data-text="#MyFirstHashTag Testing text" data-show-count="false">Tweet #Test</a> <select id="TweetCounties" value="0"> <option value="0">Select Area</option> <option value="1">Dublin</option> <option value="2">Cavan</option> <option value="3">Wicklow</option> <option value="4">Galway</option> </select> </div> 

Answer 1

當您將按鈕放在頁面上時，twitter庫將創建一個iframe並在其中創建按鈕，因此您不必修改iframe內的任何對象，而是可以根據需要刪除並重新創建按鈕（也可以重新加載）小部件js lib）：

 function load_js() { var src = "//platform.twitter.com/widgets.js"; var head= document.getElementsByTagName('head')[0]; var script= document.createElement('script'); script.type= 'text/javascript'; script.src= src; script.charset= "utf-8"; head.appendChild(script); } $(document).ready(function() { $("#TweetCounties").change(function() { var seletedCounty = $('#TweetCounties :selected').text(); console.log(seletedCounty); var seletedValue = $('#TweetCounties').val(); if (seletedValue !== "0") { // $("iframe[id^='twitter-widget-']").remove(); $(".tweetButtonLaytout").prepend('<a id="twitterButton" class="twitter-hashtag-button" href="https://twitter.com/intent/tweet?button_hashtag=' + seletedCounty + '" data-text="#MyFirstHashTag Testing text" data-show-count="false">Tweet #' + seletedCounty + '</a>'); load_js(); } }); }); 

 <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> <div class="tweetButtonLaytout"> <a id="twitterButton" class="twitter-hashtag-button" href="https://twitter.com/intent/tweet?button_hashtag=Test" data-text="#MyFirstHashTag Testing text" data-show-count="false">Tweet #Test</a> <select id="TweetCounties" value="0"> <option value="0">Select Area</option> <option value="1">Dublin</option> <option value="2">Cavan</option> <option value="3">Wicklow</option> <option value="4">Galway</option> </select> </div> 

編輯：或者您可以使用Twitter的庫，因為它在這里說明：

twttr.widgets.createHashtagButton(
  "TwitterStories",
  document.getElementById("container"),
  {
    size:"large"
  }
);

Answer 2

您需要創建並使用Twitter API庫加載＃標簽按鈕，因為它是覆蓋a元素與iframe到按鈕，所以不使用他們的API（你不能改變它iframe超出jQuery范圍）。

解：

從#TweetCounties選擇后，將創建第一個按鈕並將其存儲為currentButton ，當#TweetCounties更改時，將創建一個新按鈕，刪除舊按鈕並用新按鈕覆蓋currentButton 。

這種方法最好在#TweetCounties更改值時重新加載js，因為我們已經加載了twitter lib一次。

 $(document).ready(function() { var currentButton; $("#TweetCounties").change(function() { var seletedCounty = $('#TweetCounties :selected').text(); var seletedValue = $('#TweetCounties').find(":selected").attr('value'); if (seletedValue !== "0") { var btnContainer = $('#buttonContainer'); twttr.widgets.createHashtagButton(seletedCounty, document.getElementById('buttonContainer')) .then(function(newButton) { $(currentButton).remove(); currentButton = newButton; }); } }); }); 

 <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> <div class="tweetButtonLaytout"> <div id="buttonContainer"></div> <select id="TweetCounties" value="0"> <option value="0">Select Area</option> <option value="1">Dublin</option> <option value="2">Cavan</option> <option value="3">Wicklow</option> <option value="4">Galway</option> </select> </div>