Javascript 更新推特按钮

Posted 2023-03-28

【中文标题】Javascript 更新推特按钮

【英文标题】：Javascript update twitter Button

【发布时间】：2018-02-24 23:30:35

【问题描述】：

我正在创建一个随机报价生成器。我已经使用quotesondesign.com的api完成了大部分工作，但我需要做的最后一件事是当我单击“新报价”按钮时将推特按钮更新为新报价。但它不会改变，我不知道为什么。

$( document ).ready(function()  
  //get Quote And call to update twitter Button
  $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a)  
    $("#quote-content").html(a[0].content); 
    $("#quote-title").text(a[0].title);
    updateTweet(a);
  );

  //new Quote and update Twitter
  $('#newButton').on('click', function() 
    $.ajax( 
      url: 'https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=',
      success: function(a) 
        $('#quote-content').html(a[0].content);
        $('#quote-title').text(a[0].title);
        updateTweet(a);
      ,
      cache: false
    );
  );

  //update twitter button function
  function updateTweet(a) 
    var thisQuote = a[0].content.replace(/<\/?[^>]+(>|$)/g, "");
    var thisQuoteTitle = a[0].title;
    $(".twitter-share-button").attr("href", "https://twitter.com/intent/tweet?text=" + thisQuote + "- " + thisQuoteTitle);
  
);

这是我正在处理的代码笔：https://codepen.io/Uberche/pen/RLbjbp

我意识到它很丑而且设置不正确，只是在更改样式等之前尝试让功能正常工作。任何帮助，将不胜感激。对不起，如果这是我忘记包含的一些愚蠢的东西，还在学习 javascript 并且忘记了很多东西......

【参考方案1】：

您需要从页面中删除 iframe，添加一个新的 <a> 元素，其中包含您要在推文中使用的值，然后调用 twttr.widgets.load()。

使您的代码如下所示（在您的代码笔中测试和确认）：

// New Quote and Update Twitter
$('#newButton').on('click', function() 
  $.ajax(
    'https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=',
    
      success: function(a) 
        $('#quote-title').text(a[0].title);
        $('#quote-content').html(a[0].content);
        updateTweet(a);
      ,
      cache: false
    
  );
);

//Twitter Button Update
function updateTweet(a) 
  var thisQuote = a[0].content.replace(/<\/?[^>]+(>|$)/g, "");
  var thisQuoteTitle = a[0].title;

  // Remove the iframe
  $('#socialMore iframe').remove();

  // Generate new markup
  $('<a>', 
    class: 'twitter-share-button',
    id: 'tweet_btn',
    href: 'http://twitter.com/intent/tweet',
    'data-text': thisQuote + "- " + thisQuoteTitle
  ).appendTo('#socialMore');

  // Reload the widget
  twttr.widgets.load();

【讨论】：

甜蜜！非常感谢！！

@Uberche 不客气！不要忘记，如果您觉得我的答案有帮助，您可以将我的答案标记为正确答案。祝您未来的编码工作好运！

我以为我可以，但不知道怎么做，因为我的大脑显然工作不那么好。我该怎么做呢？没关系，找到了。

【参考方案2】：

twitter 链接没有类“.twitter-share-button”

编辑：更多细节。

在您的 Codepen 中，无论您拉入哪个 Twitter 小部件包，都会使用该链接并将其替换为 iframe 和其他几个嵌套元素。用户最终点击的实际锚点隐藏在底部，实际上并没有 twitter-share-button 类。

【讨论】：

明白，感谢您的信息！打算研究正在构建的最终结果，并没有真正考虑过该包将如何更改代码。