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）加载到元素。在这种情况下，您似乎只想将隐藏元素复制到可见元素：

这只是一种复制和粘贴。

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

无需使用empty()，因为所有内容都已被替换。

Answer 2

他们在你的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 3

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 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，您甚至不需要调用空：jsfiddle

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

Jquery .load / .empty没有加载和清空div中的内容

4 个答案: