JavaScriptアップデートtwitterボタン

Question

ランダムクォートジェネレーターの作成に取り組んでいます。私はそれがほとんどquotesondesign.comのAPIを使用して終了しているが、私がする必要がある最後のことは、新しい見積もりボタンをクリックすると、新しい引用にTwitterのボタンを更新することです。しかし、それは変わることはありませんし、私はなぜそれがわからないのですか？私はちょうどスタイルと、そのようなを変更する実行する前に作業機能を取得しようと、それは醜いと適切に設定されていないのです実現https://codepen.io/Uberche/pen/RLbjbp

：

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

は、ここで私はこれに取り組んでいます私のcodepenです。どんな助けもありがとう。申し訳ありませんが、これは私はまだJavaScriptを学習し、物事多くのことを忘れて、含めるのを忘れていくつかの愚かな事なら...

Answer 1

ページからiframeを削除し、新しい<a>要素にあなたのツイートに使用する値を追加してから、twttr.widgets.load()に電話する必要があります。

は、以下のようなコードを作成します（テストし、あなたのcodepenで確認）：情報のため

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

Answer 2

Twitterのリンクがクラス「.twitterシェアボタン」を

EDIT持っていません。もっと詳細。

あなたのCodepenでは、あなたが引き寄せているTwitterウィジェットパッケージがそのリンクを受け取り、それをiframeといくつかの他のネストされた要素に置き換えます。ユーザーがクリックしてしまう実際のアンカーは、下に埋もれていて、実際にはtwitter-share-buttonクラスはありません。