Установить содержимое кнопки "Tweet" "data-text" динамически с помощью JavaScript или..?

Вот функциональный код в форме, отображающей кнопку Tweet - кнопки в форме, отображающей несколько изображений, - когда пользователь нажимает одно из изображений, оно становится "выбранным" изображением, а кнопка Tweet должна твитнуть имя и 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>

У меня есть обработчик onclick() для div, который отображает изображение. Когда пользователь щелкает одно из изображений, вызывается его обработчик onclick() его div и устанавливает это изображение как "currentSelectedImage" на странице, а затем обработчику onclick() необходимо обновить "data-text" кнопки 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>

Мне нужно динамически изменить значение атрибута "data-text" в кнопке Tweet, чтобы оно стало именем выбранного изображения. Я добавил приведенный выше код javascript, который завершается ошибкой - 'elem', полученный из кода здесь:

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

является нулевым (я думаю) из-за этой строки в коде кнопки твита Twitter:

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

Я не уверен, но похоже, что скрипт по умолчанию для кнопки Twitter Tweet перезаписывает любые попытки добавить атрибут 'id' к кнопке Tweet.

Вы увидите, что я добавил id="tweetBtnId" к кнопке Tweet выше, чтобы я мог получить доступ к кнопке Tweet в моем обработчике выбора изображения onclick() выше, а затем присвоил "data-text" имя только что выбранное изображение.

Я просто сомневаюсь, что цель разработки Twitter для кнопки Tweet заключалась в следующем: "мы будем тупить этот присосок ПУТЬ, мы только позволим этим животным выбрать ОДНО значение текст-данные - каждая кнопка Tweet должна иметь одну жестко закодированную" -on-the-page "атрибут data-text - шутить над ними, если они пытаются динамически изменить атрибут data-text кнопки Tweet."

Мне нужно заставить это работать - есть идеи?

Источник

4 ответа

Решение

Похоже, на данный момент это будет хитрый подход к скрытой форме / переменной php - я опубликую пост, если найду лучший обходной путь.

РЕДАКТИРОВАТЬ: решение для скрытой формы /PHP-переменной превзошло препятствия, создаваемые кнопкой Twitter в Twitter - теперь я могу успешно, динамически изменять текст кнопки Tweet по желанию, в любое время на основе пользовательского ввода на стороне клиента. По проницательному замечанию Доменика о том, что приведенный выше вопрос слишком длинный и содержит код, я пропущу публикацию ответа здесь и извиняюсь за приведенную выше длину.

Источник

Просто поместите его в контейнер с известным идентификатором и просмотрите документ:

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

$("#someIDiKnow a").attr("data-text", "Replacement Text!");
Источник

Используя в 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>

Мне удалось изменить "data-text" с помощью javascript

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

также работал с document.getElementById('twitter'), если вы добавляете id='twitter' в

Источник

Вы можете использовать JQuery для обновления атрибута data-text, добавив действие 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);" />
Источник
Другие вопросы по тегам