javascript - 如何使用 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”标签中，并将其显示设置为无。 (显示:无)

此外，您应该设置一个属性，例如“id”或“data-paraph”，以便通过引用您的“li”来访问它们。

接下来，您可以通过将鼠标悬停在每个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>