用JQuery替换div内容

Question

我有一些图片，当你点击他们，我想要一个特定的div文本出现在下面。由于某些原因，这只适用于第一次单击。

scroll-content是放置内容的div。按摩，禅宗，灵魂是图像链接。容器divs保存<p></p>信息。

      <section id = "image">
    <a href="#" ><img id ="massage"></a>...
       </section>
        <section id = "scroll-content">
            <div id = "container1">
                         ...
                     </div>
             </section>


 $('#massage').click(function() {

    var htmlString = $( '#container2').html();

  $('#scroll-content').html(htmlString);
});

$('#zen').click(function() {

     var htmlString = $( '#container1').html();
  $('#scroll-content').html(htmlString);
});


$('#soul').click(function() {

    var htmlString = $( '#container3').html();
$('#scroll-content').html( htmlString );
});

Answer 1

实际工作代码：

jsFiddle

您的示例不起作用超过一次，因为当您启动指令时

$('#scroll-content').html(htmlString);

实际上，您正在覆盖以下部分的内容

 #container1, #container2, [...]

都是储存的。

<section id = "scroll-content">
            <div id = "container1"> //You are going to delete me.
                         ...
                     </div>
  </section>

必须更改代码以添加一个虚拟容器。如下所示：

 <section id = "image">
    <a href="#" ><img id ="massage"></a>...
       </section>
        <section id = "scroll-content">
            <div id = "dummy_container">
                 ...
            </div>
            <div id = "container1">
                         ...
                     </div>
             </section>


 $('#massage').click(function() {

    var htmlString = $( '#container2').html();

  $('#dummy_container').html(htmlString);
});

$('#zen').click(function() {

     var htmlString = $( '#container1').html();
  $('#dummy_container').html(htmlString);
});


$('#soul').click(function() {

    var htmlString = $( '#container3').html();
  $('#dummy_container').html(htmlString);
});

Answer 2

您要在scroll-content div下替换html，它有所有的container div，因此在替换html之后就会丢失，这就是为什么它第一次起作用。

而不是这样，只需制作/隐藏container div中的scroll-content。

如下所示：

$('#massage').click(function() {
   $('[id^="container"]').hide();
   $('#container2').show();
});

$('#zen').click(function() {
  $('[id^="container"]').hide();
   $('#container1').show();
});


$('#soul').click(function() {

   $('[id^="container"]').hide();
   $('#container3').show();
});

Answer 3

如果您希望新内容出现在前面的内容下面，则必须对新内容进行append。html()将取代以前的内容。

$('#massage').click(function() {
    var htmlString = $( '#container2').html();
    $('#scroll-content').append(htmlString);
});

$('#zen').click(function() {
     var htmlString = $( '#container1').html();
     $('#scroll-content').append(htmlString);
});


$('#soul').click(function() {
    var htmlString = $( '#container3').html();
    $('#scroll-content').append( htmlString );
});