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

Question

我正在尝试将隐藏在页面上的 select 内容加载到内容 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

您的 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 2

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

这只是一种复制和粘贴。

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

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

Answer 3

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

由于所有内容都在页面中，因此您根本不需要使用 AJAX。如果你稍微重组 HTML 并使用 common 类你可以通过从 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 4

看起来您可能需要 jQuery 的追加：jQuery Append

这是更新后的 fiddle：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);
});

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

Jquery .load / .empty not loading and emptying content from div

javascript

jquery

jquery-load