如何使用 JQuery 将文本动态加载到段落

Question

我想要一个段落，可以根据link鼠标悬停动态改变他的内容。我的想法是拥有多个文本文件，然后根据需要加载内容。我知道如何获取元素，但我很难加载和设置文本。

  (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。

另外我想知道这种方法是否会对性能产生不良影响？

也欢迎在性能和最佳实践方面提出其他更好的建议。

Answer 1

有 2 个问题：

更新段落文本时可能会有延迟。因为你会发送一个Ajax请求来获取文件内容。
每次悬停事件都会向服务器发送许多请求以获取文件内容。

您可以预加载所有段落内容：

这样，您可以将每个段落放在一个"p"标签中，并将它们的显示设置为none。（显示：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>

如何使用 JQuery 将文本动态加载到段落

How to load text to paragraph dynamically with JQuery

javascript

ajax

jquery

joomla