使用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" 
    } 
);