用JQuery替换div内容

Question

I have a few images that when you click on them, I would like a specific div text to appear underneath. This only works on the first click for some reason.

scroll-content is the div to place the content. massage, zen, soul are the image links. The container divs hold the <p></p> information.

      <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

You are replacing html under scroll-content div which has all container div s and hence getting lost after replacing html, thats why it is working for first time.

Instead of this, just make show / hide container div s which is inside scroll-content .

Like below :

$('#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

Actual working code:

jsFiddle

Your example is not working more than one time because when you fire the instruction

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

You are actually overwriting the content of the section where

 #container1, #container2, [...]

are stored.

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

You must change your code to add one dummy container. as this:

 <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

If you want new content to appear underneath the previous content, you have to append new content. html() will replace previous content.

$('#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 );
});