Question

我有一些图片，当你点击它们时，我想在下面显示一个特定的div文本。这仅适用于出于某种原因的第一次点击。

滚动内容是放置内容的div。 按摩，禅，灵魂是图像链接。 容器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

您正在替换scroll-content div下的html，其中包含所有container div s，因此在替换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 2

实际工作代码：

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 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 );
});

用JQuery替换div内容

3 个答案: