Question

创建带预览的图片库。当我点击一张图片时，它是空的div，但它不会附加新图片。我错过了什么吗？

 <div class="thumbnails">
    <img onmouseover="preview.src=classone.jpg" id="img1" class='pic' src="classone.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=danceshoes.jpg" id="img2" class='pic' src="danceshoes.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=lakemonroe.jpg" id="img3" class='pic' src="lakemonroe.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=danceshoes.jpg" id="img4" class='pic' src="danceshoes.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=danceshoes.jpg" id="img5" class='pic' src="danceshoes.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=dance.jpg" id="img6" class='pic' src="dance.jpg" alt="Image Not Loaded"/>
  </div><br/>

  <div class="preview" align="center">
    <img id="preview" src="classone.jpg" alt="N Image Loaded"/>
  </div><br/>

$(document).ready(function(){

    $('.pic').click(function(){
            $(".preview").remove();

        $(".preview").append(this); 
    });


});

Answer 1

您需要设置新的src而不是删除预览图像元素：

 $('.pic').click(function(){
    $("#preview").attr("src",$(this).attr("src")); 
 });

Jquery画廊空/追加

1 个答案: