提问者:小点点

用jQuery将一个图像附加到HTML中,然后用新的图像替换附加的图像


我试图显示一个较大版本的图像在一个较小的图片库之上,当它被点击。

目前,它继续追加图像,而不删除旧的追加图像。

有人知道我会怎么做吗?

<script>
jQuery(document).ready(function() {
    //on click of image
    jQuery("#node-facility-full-group-gallery img").click(function(event) {
        event.preventDefault();
        //get image src
        var imgToDisplay = jQuery(event.target).attr("src");
        //append image to page
        $('<img src="' + imgToDisplay + '">').load(function() {
            $(this).appendTo('#node-facility-full-group-gallery h2');
        });
    })
});
</script>

共1个答案

匿名用户

您可以使用“。remove()”删除之前添加的图像,要做到这一点,您需要在添加图像时给它一个ID。

示例:

jQuery(document).ready(function() {
  //on click of image
  jQuery("#node-facility-full-group-gallery img").click(function(event) {
    event.preventDefault();
    // remove prevously appended image
    jQuery('#node-facility-full-group-gallery h2').find('#appendedImg').remove();
    //get image src
    var imgToDisplay = jQuery(event.target).attr("src");
    //append image to page
    $('<img id="appendedImg" src="' + imgToDisplay + '">').load(function() {
      $(this).appendTo('#node-facility-full-group-gallery h2');
    });
  })
});