使用javascript動態設置按鈕「data-text」的內容，或者..？

這是在顯示Tweet按鈕的窗體上運行的代碼 - 顯示多個圖像的窗體上的按鈕 - 當用戶單擊其中一個圖像時，它會變成「選定」圖像，Tweet按鈕應該是鳴叫所選圖像的名稱和網址：使用javascript動態設置按鈕「data-text」的內容，或者..？

 <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（）處理程序被調用並將該圖像設置爲頁面上的「currentlySelectedImage」，然後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>

我需要動態改變「數據文本」屬性的值在鳴叫按鈕是所選圖像的名稱。我添加高於該fails--從這裏的代碼所獲得的「ELEM」的JavaScript代碼：

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

爲空（我想），因爲這線在上述的Twitter鳴叫按鈕的代碼的：

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

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

你會看到，我添加了ID =「tweetBtnId」到鳴叫按鈕的上方，我能得到訪問我的圖像選擇鳴叫按鈕的onclick（）處理上面，然後設置「數據 - 文本'到剛剛選擇的圖像的名稱。

我只是懷疑Twitter的Tweet按鈕的設計目標是「我們要愚弄這個吸盤，我們只會讓這些動物選擇一個數據文本值 - 每個Tweet按鈕必須有一個硬盤 - 如果他們嘗試動態更改「Tweet」按鈕的數據文本屬性，則會在頁面上顯示「一次寫入」的數據文本屬性 - 笑話。「

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

來源

2012-03-13 wantTheBest

只是螢火證實 - 鳴叫按鈕的ID是「B」，甚至沒有一個數。那麼Twitter腳本不會讓你很容易getElementById（）。 – wantTheBest 2012-03-13 01:04:06

哇，我可以聽到窗外打鼾的蝸牛。今天安靜在這裏。一種超級解決方法是創建一個帶有一個隱藏字段的窗體，並在用戶單擊圖像時調用的onclick（）處理程序中對其執行form.submit（）。然後，我可以設置一個名爲「選定圖像」的PHP變量並將其重定向回原始頁面，並使用PHP變量作爲Tweet按鈕的「數據文本」部分，這樣當用戶發送PHP變量將所選圖像的名稱分配給推文按鈕中的「數據文本」。一個服務器的往返推文！ DAGNABBIT。 – wantTheBest 2012-03-13 01:31:31

沒有人回答這個問題的原因是因爲它太長而且充滿代碼，可能與實際的核心問題無關。 – Domenic 2012-03-13 02:17:50

看起來現在會是隱藏的表單/ php變量方法 - 如果我找到更好的解決方法，我會回覆。

編輯：隱藏形式/ PHP可變解決方案擊敗了Twitter的Tweet按鈕所帶來的障礙 - 我現在可以成功地根據用戶的客戶端輸入隨時動態更改Tweet按鈕文本。 Per Domenic對上述問題的精明觀察太長，並且有代碼，我不會在這裏發佈答案，我對上面的長度表示歉意。

來源

2012-03-13 02:14:51 wantTheBest

您可以使用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-13 08:14:47 TheRocketSurgeon

他遇到的問題是'＃tweetBtnId'沒有找到按鈕！ – Stobor 2012-10-18 00:41:30

更新我的代碼以使用PhonicUK的建議。那是一個好主意！ – TheRocketSurgeon 2012-10-20 23:36:24

只是把它放在一個容器具有已知ID並遍歷與它的文件：使用HTML

3210

我管理

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

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

來源

2012-10-17 14:28:12 PhonicUK

這對我不起作用，我很肯定你必須在之後以某種方式重新加載twitter腳本。 – jovan 2014-04-07 10:15:06

用javascript改變'data-text'

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

還通過document.getElementById（「嘰嘰喳喳」）的工作，如果你加入ID =「嘰嘰喳喳」到<一個>

來源

2015-08-27 21:23:03 warkentien2

使用javascript動態設置按鈕「data-text」的內容，或者..？

回答

相關問題