4

ツイートボタンを表示するフォームの機能コードは次のとおりです。ボタンは複数の画像を表示するフォームにあります。ユーザーが画像の1つをクリックすると、その画像は「選択された」画像になり、ツイートボタンはツイートすることになっています。選択した画像の名前とURL： 

      <a id="tweetBtnId" href="https://twitter.com/share" class="twitter-share-button" 
         data-text="Check me out on OurWebSite!"
         data-url=http://$ourSiteURL
         data-via=http://$ourSiteURL data-size="medium" data-count="none">Tweet</a>
     <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0]; 
            if(!d.getElementById(id)){js=d.createElement(s); js.id=id; 
              js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js,fjs);}}
                (document,"script", "twitter-wjs");</script>

画像を表示するdivの'onclick（）'ハンドラーがあります。ユーザーが画像の1つをクリックすると、そのdivのonclick（）ハンドラーが呼び出され、その画像がページ上の「currentlySelectedImage」に設定されます。onclick（）ハンドラーは、ツイートボタンの「data-text」を更新する必要があります。選択したばかりの画像の名前を持つ属性：

          // This is part of the code of the 'onclick()' handler for
          // the image being selected. 
         <script> 
         function handleImageOnClick()
         {
           var myDynamicTweetText = "name of currently-selected image goes here";
           var elem = document.getElementById("tweetBtnId");
           alert("The elem is: " + elem);  // elem IS NULL !!  Dagnabbit.

           // this fails because 'elem' is null
           elem.setAttribute("data-text", myDynamicTweetText);

           // other onclick() code not shown for brevity......
         }
         </script>

ツイートボタンの「data-text」属性の値を、選択した画像の名前に動的に変更する必要があります。上記のjavascriptコードを追加しましたが、失敗します-ここのコードから取得した「elem」：

    var elem = document.getElementById("tweetBtnId");

上記のTwitterツイートボタンコードのこの行のためにnull（私は思う）です：

   if(!d.getElementById(id)){js=d.createElement(s); js.id=id;

よくわかりませんが、Twitterのツイートボタンのデフォルトスクリプトは、ツイートボタンに「id」属性を追加しようとすると上書きされるようです。

上のツイートボタンにid="tweetBtnId"を追加したので、上の画像選択onclick（）ハンドラーのツイートボタンにアクセスできるようになり、「data-text」をの名前に設定したことがわかります。選択したばかりの画像。

Twitterのツイートボタンの設計目標が「この吸盤を馬鹿にするつもりだ。これらの動物に1つのデータテキスト値のみを選択させる。すべてのツイートボタンにはハードコードされたものが1つ必要だ」とは思えない。 -on-the-page"データテキスト属性-ツイートボタンのデータテキスト属性を動的に変更しようとすると、冗談を言います。"

これを機能させる必要があります-何かアイデアはありますか？

4

4 に答える 4

3

既知のIDを持つコンテナに入れて、ドキュメントをトラバースするだけです。

<div id="someIDiKnow">
    <a id="tweetBtnId"...>...</a>
</div>

$("#someIDiKnow a").attr("data-text", "Replacement Text!");
于 2012-10-17T14:28:12.290 に答える
0

今のところ、それは厄介な隠しフォーム/ php変数アプローチになるようです-より良い回避策を見つけたら、投稿します。

編集：hidden-form / PHP変数ソリューションは、Twitterのツイートボタンによって引き起こされた障害を打ち負かしました-ユーザーのクライアント側の入力に基づいていつでも、ツイートボタンのテキストを自由に動的に変更できるようになりました。上記の質問が長すぎてコードが含まれているというDomenicの鋭い観察によれば、ここに回答を投稿することをスキップし、上記の長さについてお詫び申し上げます。

于 2012-03-13T02:14:51.553 に答える
0

JQueryを使用して、画像にonclickアクションを追加することにより、属性データテキストを更新できます。タグに独自の属性を追加して実際の画像タグ内にテキストを含めたい場合は、ツイートテキストを組み立てるのに簡単な回避策になる可能性があります。

例えば：

function updateTweetBtn(obj) {
   $('#someIDiKnow a').attr('data-text', $(this).attr('tweet'));
}

<img src="/images/myimage.jpg" tweet="This is what I want to tweet" onclick="updateTweetBtn(this);" />
<img src="/images/myimage2.jpg" tweet="This is some other text I want to tweet" onclick="updateTweetBtn(this);" />
于 2012-10-13T08:14:47.780 に答える
0

HTMLで使用

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<a href="http://twitter.com/share" class="twitter-share-button" data-text="old text">Tweet</a>

I managed to change the 'data-text' with javascript

var a = "new text";
document.getElementsByClassName('twitter-share-button')[0].setAttribute("data-text", a);

also worked with document.getElementById('twitter') if you add id='twitter' to <a>

于 2015-08-27T21:23:03.370 に答える