使用javascript或..動態設置推文按鈕'數據文本'內容？

Question

以下是顯示推文按鈕的表單上的功能代碼 - 顯示多個圖像的表單上的按鈕 - 當用戶單擊其中一個圖像時，它變為“選定”圖像，推文按鈕應該發布推文所選圖片的名稱和網址：

      <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（）'處理程序。 當用戶單擊其中一個圖像時，會調用其div的onclick（）處理程序並將該圖像設置為頁面上的“currentSelectedImage” - 然后onclick（）處理程序需要更新Tweet按鈕的“數據文本”屬性與剛剛選擇的圖像的名稱：

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

我需要動態更改Tweet按鈕中的'data-text'屬性值作為所選圖像的名稱。 我添加了上面的javascript代碼失敗 - 從這里的代碼獲得的'elem'：

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

是null（我認為）因為上面Twitter推文按鈕代碼中的這一行：

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

我不確定，但看起來Twitter Tweet按鈕默認腳本會覆蓋任何向Tweet按鈕添加'id'屬性的嘗試。

您將看到我在上面的Tweet按鈕中添加了id =“tweetBtnId” ，因此我可以在上面的圖像選擇onclick（）處理程序中訪問Tweet按鈕，然后將'data-text'設置為剛選擇的圖像。

我只是懷疑Twitter的Tweet按鈕的設計目標是“我們會愚蠢地將這個傻瓜推倒，我們只會讓這些動物選擇一個數據文本值 - 每個Tweet按鈕必須有一個硬編碼，”一次在頁面“數據 - 文本屬性 - 如果他們試圖動態更改Tweet按鈕的數據文本屬性，就開玩笑。”

我需要讓這個工作 - 任何想法？

Answer 1

只需將其放入具有已知ID的容器中並使用它遍歷文檔：

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

$("#someIDiKnow a").attr("data-text", "Replacement Text!");

Answer 2

您可以使用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);" />

Answer 3

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

我設法用javascript更改'data-text'

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

如果你將id ='twitter'添加到<a>，也可以使用document.getElementById（'twitter'）

Answer 4

看起來它現在將是kludgy隱藏形式/ php變量方法 - 如果我找到更好的解決方法，我會回發。

編輯：隱藏形式/ PHP變量解決方案擊敗了Twitter的推文按鈕設置的障礙 - 我現在可以成功地，根據用戶的客戶端輸入隨時動態更改推文按鈕文本。 Per Domenic精明地觀察到上面的問題太長並且有代碼，我會跳過這里的答案，我為上面的長度道歉。