Как динамически загружать текст в абзац с помощью JQuery

Как динамически загружать текст в абзац с помощью JQuery

15.12.2019 07:27:11 Просмотров 14 Источник

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

  (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

Является ответом!
Hamid Javadi

15.12.2019 11:58:50

Есть 2 вопроса:

  1. Может возникнуть задержка при обновлении текста абзаца. потому что вы отправите запрос Ajax, чтобы получить содержимое файла.

  2. Многие запросы будут отправлены на сервер, чтобы получить содержимое файла в каждом событии наведения.

Вы можете предварительно загрузить все содержание абзацев:

Таким образом, вы можете поместить каждый абзац в тег "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>

Закрыть X