Как динамически загружать текст в абзац с помощью JQuery
Я хочу иметь абзац, который будет динамически изменять свое содержание на основе ссылки, на которую наведена мышь. Моя идея состоит в том, чтобы иметь несколько текстовых файлов, а затем загружать содержимое по мере необходимости. Я знаю, как получить элементы, но мне трудно загрузить и установить текст.
(function($) {
var provider = $("p.content-provider");
$("div.menu").find("li").on("mouseover", function (e) {
var target = $(e.target).text().replace(" ","").toLowerCase() + ".txt";
//get and set the text
});
})(jQuery);
Я использую Joomla, поэтому я ограничен в HTML.
Кроме того, я хотел бы знать, будет ли этот подход плохо сказываться на производительности?
Также приветствуются другие и более эффективные предложения с точки зрения производительности и передовой практики.
Ответы - Как динамически загружать текст в абзац с помощью JQuery / How to load text to paragraph dynamically with JQuery
15.12.2019 11:58:50
Есть 2 вопроса:
Может возникнуть задержка при обновлении текста абзаца. потому что вы отправите запрос Ajax, чтобы получить содержимое файла.
Многие запросы будут отправлены на сервер, чтобы получить содержимое файла в каждом событии наведения.
Вы можете предварительно загрузить все содержание абзацев:
Таким образом, вы можете поместить каждый абзац в тег "p" и установить их отображение в none. (дисплей: нет)
Кроме того, вы должны установить атрибут типа "id" или "data-paraph" для доступа к ним, ссылаясь на свой "li".
Затем вы можете получить содержимое целевого абзаца, наведя курсор мыши на каждый ли.
(function($) {
var provider = $("p.content-provider");
$("ul.menu").find("li").on("mouseover", function (e) {
var paraphName = 'paraph-' + $(this).data('paraph');
var text = $('p[data-paraph=' + paraphName + ']').text();
provider.text(text);
});
})(jQuery);.content-provider {
border: 1px solid red;
border-radius: 5px;
margin: 10px;
padding: 10px;
}
li:hover {
cursor: pointer;
}
#preloaded-contents {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
<li data-paraph="1">Item 1</li>
<li data-paraph="2">Item 2</li>
<li data-paraph="3">Item 3</li>
</ul>
<p class="content-provider">
Content Provider is here
</p>
<div id="preloaded-contents">
<p class="preloaded-content" data-paraph="paraph-1">
Paragraph content of item 1
</p>
<p class="preloaded-content" data-paraph="paraph-2">
Paragraph content of item 2
</p>
<p class="preloaded-content" data-paraph="paraph-3">
Paragraph content of item 3
</p>
</div>