我试图显示一个较大版本的图像在一个较小的图片库之上,当它被点击。
目前,它继续追加图像,而不删除旧的追加图像。
有人知道我会怎么做吗?
<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>
您可以使用“。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');
});
})
});