使用 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 Lib API 创建和重新加载主题标签按钮，因为它会用 iframe 覆盖 a 元素到按钮，所以如果不使用他们的 api 就无法更改它（iframe 已超出 @987654324 @范围）。

解决方案：

从#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>

Answer 2

当您将按钮放在页面上时，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 的库，正如 here 所解释的那样：

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