Question

我在我的网站（http://conn3cted.uk.tn/quote.html）上使用Twitter createShareButton ，但每次“新报价”都会出现。按下按钮会创建一个新的推特按钮，给我留下多个按钮（例如，如果按下“按下”按钮10次，则会有10个共享按钮）。

几天前工作正常，所以不确定到底发生了什么。

我的JavaScript位于

之下

// Random Quote Generator
$(document).ready(function() {
  // Set the default values for future AJAX requests
  $.ajaxSetup({
    // Prevent all future AJAX requests from being cached. 
    cache: false
  });
  // API URL
  var quoteURL = "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1";
  // getQuote function, which accepts a data parameter. 
  var getQuote = function(data) {
    // Replace the html of the targeted element with the returned content field.
    $(".quoteContent").html(data[0].content);
    // Replace the html of the targeted element with the returned title field.
    $(".quoteTitle").html('Author: ' + data[0].title);
    newColor();

    twttr.ready(function() {
        // Use the pre-made createShareButton function
        twttr.widgets.createShareButton(
            // Do not share a URL
            " ",
            // Div where the share button should be inserted
            document.getElementById('tweetButton'),
            {
                // Define the tweet that will be used
                text: "'" + $(".quoteContent").text().replace(/(\r\n|\n|\r)/gm,"") + "'\n" +
                $(".quoteTitle").text(),
                // Set the size of the Twitter share button
                size: "large",
            }
        );
    });
  };

  var newColor = function() {
    var color = Please.make_color();
    $("body, button, .btn").css("background-color",color);  
    $("p, blockquote").css("color",color);
  };

  /*  
  * On every page load get JSON data from the URL, defined in the
  * 'url' variable, and then run the getQuote function 
  */
  $.getJSON(quoteURL, getQuote);
 //newColor();

 /*  
  * When the button is clicked load get JSON data from the   * URL,defined in the 'url' variable, and then run the
  * getQuote function.
  */
  $(".regenButton").click(function() {
    $.getJSON(quoteURL, getQuote);
  });


});

Answer 1

您的Twitter分享按钮代码位于getQuote函数内 - 因此每次点击.regenButton时，都会调用getQuote，为您提供另一个按钮。

Answer 2

这是因为您在$.getJSON成功回调中创建了twitter按钮。因此，每次加载报价时，都会创建一个推特按钮。

最佳解决方案是创建按钮一次，并在每次加载报价时更新共享文本。我在文档中找不到。所以我最好的猜测是先删除之前的那个：

var getQuote = function(data) {
  // Replace the html of the targeted element with the returned content field.
  $(".quoteContent").html(data[0].content);
  // Replace the html of the targeted element with the returned title field.
  $(".quoteTitle").html('Author: ' + data[0].title);
  newColor();

  // remove previous button
  $('.twitter-share-button').remove();

  // and create a new one
  twttr.ready(function() {
      // Use the pre-made createShareButton function
      twttr.widgets.createShareButton(
          // Do not share a URL
          " ",
          // Div where the share button should be inserted
          document.getElementById('tweetButton'),
          {
              // Define the tweet that will be used
              text: "'" + $(".quoteContent").text().replace(/(\r\n|\n|\r)/gm,"") + "'\n" +
              $(".quoteTitle").text(),
              // Set the size of the Twitter share button
              size: "large",
          }
      );
  });
};

Answer 3

对于遇到这篇文章的人;我正在研究这个问题，并发现了一种在不使用Twitter Widget的情况下创建Twitter Share按钮的方法。

首先，你需要创建一个A标签......

<!-- 
- href will create a link to the Twitter web intent composer
- target (_blank) will open the link in a new window
--> 
<a class="tweetButton" href="https://twitter.com/intent/tweet?text=Initial Text" 
                target="_blank">
<!-- Create a button for the link to interact with -->
   <button class="btn">
      Tweet
   </button>
</a>

然后设置jQuery为每个新引用修改它......

/*
* Amend the "href" attribute of the element with a "tweetButton" class
* (the "a" tag) to take the twitterURL Global Variable, plus the parameter 
* "text=" (which specifies what the tweet will say) and assign the value of:
*
* - the element with a class of "quoteContent", without the HTML tags 
* (.text()), removing all line breaks (.replace(/(\r\n|\n|\r)/gm,"")), 
* trims all the white space (.trim())
*
* - adds a line break (\n)
*
* - the element with a class of "quoteTitle", without the HTML tags
* (.text())
*
* Then URL encode the result (encodeURIComponent) to complete the amendment
*/
$(".tweetButton").attr("href", twitterURL + "text=" + encodeURIComponent("'" +
    $(".quoteContent").text().replace(/(\r\n|\n|\r)/gm,"").trim() +
    "'\n" + $(".quoteTitle").text()));

Twitter按钮正在创建多个按钮

3 个答案: