javascript - 用 JQuery 替换 div 内容

Question

我有一些图像，当您单击它们时，我希望在下方显示特定的 div 文本。由于某种原因，这仅适用于第一次点击。

scroll-content 是放置内容的div。 ma​​ssage, zen, soul 是图片链接。 容器 div 包含 <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);
});