losing original variable reference on second click

Question

Newbie :)

I am trying to create a picture w/ description portfolio. It works fine on the first click of thumbnail for description, but the second click, the description is nowhere to be found on the page. Its almost like it uses the description once then, throws it away. How do I ensure this doesn't happen? To put description back in its original place in the html, or some other way? Trying to keep this simple but keeps getting more complicated. This is why designers outsource lol.

testpage:http://www.tsmillie.com/portfolio2.html

code:

$(".gallery a:has(img)").click(function() {

    var largePath = $(this).attr("href");
    var image = $(".photo_large");
        image.fadeOut('500', function () {
        image.attr({ src: largePath }) ;
        image.fadeIn('500');
                      });
    var description = $(this).next(".description").css("display", "inline");
    $(".caption").html(description);
      return false;
          });

Answer 1

Try changing to this:

$(".gallery a:has(img)").click(function() {
    var largePath = $(this).attr("href");
    var image = $(".photo_large");
    image.fadeOut('500', function () {
        image.attr({ src: largePath }) ;
        image.fadeIn('500');
    });
    var description = $(this).next(".description");
    $(".caption").html(description.clone().css("display", "inline")); // <---- Changed
    return false;
});

I think it was moving the description into the caption rather than copying the html which is what I guess you want to do?

It now clones the content and displays that in the caption.

Answer 2

正如InfernalBadger所说，您要将对description元素的引用添加到.caption元素中，并且当替换.caption的内容时，您将从DOM中删除了先前的描述。