使用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庫API重裝主題標籤按鈕，因爲它與iframe覆蓋a元素按鈕，這樣你如果不使用它們的API，則不能更改它（iframe不在jQuery範圍內）。

解決方案：

這是一個從#TweetCounties創建後選擇第一個按鈕，並將其存儲爲currentButton，當#TweetCounties改變它的新建按鈕，刪除舊的和新的一個覆蓋currentButton。

因爲我們已經加載了twitter lib一次，所以這種方式更好，然後在#TweetCounties更改值時重新加載js。

$(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>

Answer 2

當你把頁面上的按鈕，嘰嘰喳喳的庫創建一個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的圖書館，因爲它是解釋here：

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