Jquery .load / .empty 不从 div 加载和清空内容

Question

我正在尝试将隐藏在页面上的选定内容加载到内容 div 中。为此，我遇到了 jquery 的.load 和.empty。

它似乎在某个地方出了问题，但据我所知，它应该可以工作，我在哪里出错了？一个更广泛的问题是 .load / .empty 使用正确的功能还是有更简单的方法？

我在下面附上了我的 html 和 Js，并在这里创建了一个 JSfiddle：https://jsfiddle.net/poha5cb2/3/

我设置了以下内容：

<a id="op-1">Open 1</a><br>
<a id="op-2">Open 2</a><br>
<a id="op-3">Open 3</a><br>

<hr>

<h2>CONTENT</h2>
<div id="content">

</div>

<hr>

<div class="hidden-content-to-be-loaded" style="display: none;">
    <div id="one">
    <h3>One</h3>
    </div>

    <div id="two" class="initial-close">
    <h3>Two</h3>
    </div>

    <div id="three" class="initial-close">
    <h3>Three</h3>
    </div>
</div>

对于我写的 JS

$("#op-1").click(function(){
                $("#content").empty();
        $("#content").load("#one);
});

$("#op-2").click(function(){
                $("#content").empty();
        $("#content").load("#two);
});


$("#op-3").click(function(){
                $("#content").empty();
        $("#content").load("#three);
});

Answer 1

load() 方法旨在通过发出 AJAX 请求从外部 URL 检索内容，而不是通过选择现有元素来移动当前页面的 DOM。您似乎也有语法错误，选择器上缺少引号。

由于所有内容都在页面中，因此您根本不需要使用 AJAX。如果您稍微重构 HTML 并使用通用类，您可以通过匹配索引从 a 中选择相关内容并显示它来改进和简化代码，如下所示：

$('.open').click(function(e) {
    e.preventDefault();
    $('.content').hide().eq($(this).index('.open')).show();
})

.content {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="open">Open 1</a><br>
<a href="#" class="open">Open 2</a><br>
<a href="#" class="open">Open 3</a><br>

<hr>

<h2>CONTENT</h2>
<div id="content-container">
    <div class="content">
        <h3>One</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam aut, veniam! Eveniet, repudiandae ipsum? Quas ea assumenda, ullam magnam dolores iste neque harum, repudiandae modi distinctio ratione laborum excepturi ad!
    </div>
    <div class="content">
        <h3>Two</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam aut, veniam! Eveniet, repudiandae ipsum? Quas ea assumenda, ullam magnam
    </div>
    <div class="content">
        <h3>Three</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam aut, veniam! Eveniet, repudiandae ipsum? Quas ea assumenda, ullam magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut sint consequatur saepe, quo beatae exercitationem
        nostrum quos, illum a inventore fuga dignissimos atque iusto. Quis magnam voluptatibus, ipsum cum assumenda.
    </div>
</div>

Answer 2

load() 用于将内容从服务器（ajax）加载到元素。在这种情况下，您似乎只想将隐藏元素复制到可见元素：

这只是一种复制和粘贴。

$("#op-1").click(function(){
    var one_content = $("#one").html();       
    $("#content").html( one_content );
});

没有必要使用empty()，因为所有内容都被替换了。

Answer 3

你的 js 中缺少 "。

试试下面的代码：

var $content = $("#content")
$("#op-1").click(function(){
    $content.html($("#one").html());
});

$("#op-2").click(function(){
    $content.html($("#two").html());
});


$("#op-3").click(function(){
    $content.html($("#three").html());
});

Answer 4

看起来你可能想要 jQuery 的追加：jQuery Append

这是一个更新的小提琴：https://jsfiddle.net/poha5cb2/6/

$("#op-2").click(function() {
  $("#content").empty();
  var $content = $('#two');
  $("#content").append($content);
});

基本上，获取对所需内容的引用，然后将其添加到内容 div。正如其他答案所说，使用 .html 也可以做到这一点。

更新

其他答案是正确的，因为一旦调用 .empty()，附加一个元素就会给你带来麻烦。由于您要替换 html，因此您甚至不需要调用 empty：jsfiddle

$("#op-2").click(function() {
  var content = $('#two').html();
  $("#content").html(content);
});