Question

我在尝试使用twitter按钮访问数据文本字段时遇到问题。我试图根据用户的一些选择自定义文本。使用JQuery我尝试访问锚文本，但它总是回来未定义。我不确定为什么我似乎无法访问锚点字段中的值。

＆＃13;

$(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');
    }
  });
});

＆＃13;

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

＆＃13;

Answer 1

当您将按钮放在页面上时，twitter库会创建一个iframe并在其中创建按钮，因此您不能修改iframe中的任何对象，而是可以根据需要删除并重新创建按钮像这样（也重新加载widget js lib）：

＆＃13;

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();
    }
  });
});

＆＃13;

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

＆＃13;

编辑或者你可以使用Twitter的库，因为它被解释为here：

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

Answer 2

您需要使用Twitter Lib API创建并重新加载主题标签按钮，因为它会将a元素覆盖为iframe按钮，因此您无法在不使用其api的情况下更改它（{{1} }超出iframe范围。）

<强>解决方案：

从jQuery中选择后创建第一个按钮并将其存储为#TweetCounties，当currentButton更改创建新按钮时，删除旧按钮并使用新按钮覆盖#TweetCounties 。

这种方式比currentButton更改值时重新加载js更好，因为我们已经加载了一次twitter lib。

#TweetCounties

$(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;
           });
    }
  });
});

使用JQuery更改TwitterButton属性值

2 个答案: