Динамически изменить текст кнопки "данные-текст" кнопки "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 задается в зависимости от того, что происходит раньше и не изменяется после.

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

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

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

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

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

Ответы

Ответ 1

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

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

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

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

Ответ 2

Вы также можете использовать Twitter createShareButton вызов 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'
    };
}

Ответ 3

поскольку вы используете цикл each, вы можете использовать операторы if:

  $(document).ready(function(){
       $('a[data-text]').each(function(){
          if (theCase == 1) {
             $(this).attr('data-text', Text_Variant_1);
          }
          else if (theCase == 2) { ... }
        })
 });