Динамическое изменение содержимого кнопки "Tweet" в текстовом формате.

Этот вопрос очень близко подходит к тому, что я ищу: замените атрибут в кнопке Tweet на Jquery

Однако предлагаемое решение работает только один раз. То есть я не могу использовать его в своем операторе switch следующим образом:

    switch(element.id)
    {
        case "t1":
            $(document).ready(function(){
                $('a[data-text]').each(function(){
                    $(this).attr('data-text', Text_Variant_1);
                });
                $.getScript('http://platform.twitter.com/widgets.js');
            });
            break;
        case "t2":
            $(document).ready(function(){
                $('a[data-text]').each(function(){
                    $(this).attr('data-text', Text_Variant_2);
                });
                $.getScript('http://platform.twitter.com/widgets.js');
            });
        ...
    }

Что происходит, так это то, что атрибут data-text устанавливается в зависимости от того, что произойдет раньше, а потом не изменится.

Как я могу изменить атрибут data-text кнопки Tweet столько раз, сколько мне нужно?

Обновление: вот страница, над которой я работаю: http://zhilkin.com/socio/en/

Таблицу черт можно безопасно игнорировать. Что я хочу сделать с таблицей Sociotypes, так это то, что когда вы нажимаете на тип, текст данных кнопки Tweet под описанием справа должен быть соответствующим образом изменен.

Прямо сейчас это работает так: если я наведите курсор мыши или нажмете "Дон Кихот", тогда текст данных будет установлен на "... Дон Кихот...", и он останется прежним, если я нажму "Дюма" позже. И наоборот: если я наведите курсор мыши или нажмете "Dumas", тогда текст данных будет установлен на "... Dumas..." и не изменится, если я нажму "Don Quixote". (Другие типы пусты на данный момент.)

Таким образом, кнопка Tweet изменяется только при первом запуске скрипта, но мне нужно, чтобы он обновлялся столько раз, сколько изменяется тип.

Источник

3 ответа

Решение

Этим утром я боролся с этим пару часов, но наконец-то все заработало! По сути, проблема заключается в том, что вы можете включить скрипт twitter widgets.js только один раз на странице, и этот скрипт оценивает data-text атрибут при загрузке. Поэтому в вашем примере вы динамически устанавливаете data-text Атрибут перед загрузкой скрипта, который будет работать как положено. Тем не менее, вы не можете делать дальнейшие обновления, так как скрипт уже запущен.

Я видел эту статью, предлагающую вам позвонить twttr.widgets.load() снова во время выполнения, чтобы переоценить и перерисовать кнопки, однако это не сработало для меня. Это потому, что эта функция переоценивает <a> теги, а не <iframe> теги!

Таким образом, решение, как указано здесь, состоит в том, чтобы полностью удалить <iframe> из DOM, а затем сделать новый <a> элемент со всеми соответствующими атрибутами перед вызовом twttr.widgets.load() чтобы наконец переоценить его и превратить в <iframe>,

Пожалуйста, посмотрите эту скрипку для рабочего примера!

Источник

Вы также можете использовать вызов API TwitterShareButton API:

function callAsRequired(){
  var nodeID = 'YourTwitterNodeID'

  //Remove existing share button, if it exists.
  var myNode = document.getElementById(nodeID);
  while (myNode.firstChild) {
    myNode.removeChild(myNode.firstChild);
  }

  //Create button and customise
  twttr.widgets.createShareButton(
    'http://your.custom.url.here/',
    document.getElementById(nodeID),
    {
      count: 'none',
      text: 'Your custom tweet here'
    };
}
Источник

Так как вы используете each loop you can use if statements instead:

  $(document).ready(function(){
       $('a[data-text]').each(function(){
          if (theCase == 1) {
             $(this).attr('data-text', Text_Variant_1);
          }
          else if (theCase == 2) { ... }
        })
 });
Источник
Другие вопросы по тегам