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

Question

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

  (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个问题：

1. 在更新段落文本时可能会有延迟。因为您将发送Ajax请求以获取文件内容。

2. 许多请求将发送到服务器，以在每个悬停事件中获取文件内容。

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

这样，您可以将每个段落放在“ p”标记中，并将其显示设置为无。 （显示：无）

[另外，您应通过引用“ li”设置诸如“ id”或“ data-paraph”之类的属性以对其进行访问。

接下来，将鼠标悬停在每个列上可以获得目标段落的内容。

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