Как обновить или перезагрузить отдельный элемент HTML

Question

Пожалуйста, помогите мне обновить один HTML-элемент после начальной загрузки страницы. Что моя программа должна делать в основных терминах: (упражнение FreeCodeCamp: Random Quote Machine)

• получить случайную цитату из API
• показать цитату и автора
• кнопка для получения новой цитаты / автора
• кнопка, чтобы чирикать цитату / автора

Мне удалось заставить все работать должным образом, но я обнаружил, что мой элемент привязки, который я использую для отправки твита, не будет обновляться после начальной загрузки страницы. Его атрибут "data-text" соответственно изменился, но он не отражается на кнопке / ссылке.

Это выдержка из моего html тела: полный код на http://codepen.io/jattas/pen/gmNQpv

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div class="button-box">
  <button id="getQuote">Generate new quote</button>
  <a href="https://twitter.com/share" class="twitter-share-button" data-text="" data-show-count="false">Tweet</a>
  <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

Мне нужно обновить элемент привязки, чтобы отобразить только что измененный атрибут, а не атрибут начальной загрузки страницы. Пожалуйста помоги! Я уверен, что это не должно быть так сложно.

Это соответствующая выдержка из моего JavaScript:

var textToTweet = '';

function processQuote() {

  var currentQuote = obj.quote;
  var currentAuthor = obj.author;
  $(".quote").html(currentQuote);
  $(".author").html("- " + currentAuthor);
  textToTweet = currentQuote + " " + "-" + currentAuthor;
  $(".twitter-share-button").attr("data-text", textToTweet);
  alert($(".twitter-share-button").attr("data-text"));       //this is to confirm that the "data-text" attribute has changed as planned
}

$(document).ready(function() {

  processQuote();

  $("#getQuote").on("click", function() {
    getQuote();
    processQuote();
  });

});

Большое спасибо.

Answer 1

Я нашел решение этой проблемы благодаря Danyx на этот вопрос.

Приведенное выше решение Morfium работает, но оно создало дополнительные кнопки, которые было трудно разместить там, где это необходимо.

Вместо этого, согласно решению Danyx, не создавайте кнопку в html. Скорее создайте его в функции, которая запускается каждый раз, когда создается новая цитата:

function createButton() {           
  $(".twitter-share-button").remove();  //this does nothing during the first run but is required in order to prevent creating duplicate buttons
  var button = document.createElement('a');
  button.classList += "twitter-share-button";
  button.innerHTML = "Tweet";
  button.setAttribute("data-text", textToTweet);
  button.setAttribute("data-url", " "); //removes unwanted codepen url at end of tweet      
  button.setAttribute("data-via", "");
  button.setAttribute("href", "https://twitter.com/intent/tweet");
  document.querySelector(".button-box").appendChild(button);
  twttr.widgets.load();  //this reloads the twitter widget (https://dev.twitter.com/web/javascript/loading) that I failed to mention in my original question - more info on this in Danyx's answer mentioned above
}

Полный код можно посмотреть здесь.

Answer 2

Судя по вашему описанию, я думаю, что ваши селекторы для цитаты и авторские элементы неверны. Поскольку вы не показываете HTML для тех, я не уверен на 100%.

Вы, вероятно, загружаете элементы с предопределенным текстом в html, а затем пытаетесь заполнить их с помощью processQuote(). Я думал об этом, поскольку вы можете правильно заполнить атрибут данных, но, похоже, не можете обновить текст ссылки. Пожалуйста, проверьте, действительно ли ваши элементы имеют class="quote" и class="author", а не идентификаторы или другие имена.

Простой способ убедиться в этом - вызвать ваш селектор в консоли разработчика вашего браузера. Вы получите элемент обратно, который также подсвечивается при наведении. Если они не возвращают элемент, они ошибаются.

Как предложил Satpal, вы должны вызывать processQuote () в рамках функции обратного вызова success. Это связано с тем, что ваши данные извлекаются асинхронно, и вы не можете гарантировать, что они у вас уже есть, когда вы достигнете processQuote () после вызова getQuote().

Еще одна маленькая вещь: так как вы хотите изменить только текст, вы можете использовать.text("мой текст") вместо.html("мой текст"). Это предотвращает инъекцию (маловероятно в вашем случае, но все же является хорошей практикой IMO).

Редактировать: Я полностью скучал по тебе, то извините.

Если вы добавите это в ваш успешный пример getQuote в конце, оно должно работать:

var parentElem = $('iframe').parent(); $('iframe').remove(); $(parentElem).append('<a href="https://twitter.com/share" class="twitter-share-button" data-text="' + obj.quote + '" data-show-count="false">Tweet</a>'); twttr.widgets.load();

Я нашел это на другой странице переполнения стека здесь.

Все ссылки были мертвыми, поэтому я попробовал это сам. Я никогда не использовал кнопку твиттера, поэтому это может быть не лучшим способом сделать это. В основном это удаляет вашу текущую кнопку и воссоздает ее. Возможно, вы захотите попробовать, если специальные символы (особенно кавычки) все еще работают с этим способом.