-3

当您单击图像时，我正在尝试开发弹出功能，该图像作为弹出窗口打开。这是示例 http://soumghosh.com/otherProjects/natalierosscms/175-2/

单击第一个图像并关闭它。然后点击第二张图片。图像在重复。任何想法我做错了什么？由于某种原因，我无法在此处发布代码。

JavaScript：

$('.alignnone').click(function(){
    $('.overlay').appendTo('body');
    $('.overlay').show();

    var popImage = $('.projectContainer').show();
    var thumbHolder = $(this).parent();
    thumbHolder.css('position', 'relative');

    $(this).clone().appendTo('.projectContainer');
    var cssAtrOne = {
        padding:'10px',
        width:'110%'
    };
    popImage.appendTo(thumbHolder).css(cssAtrOne);
});

$('.closeButton').click(function(){
    $('.overlay').hide();
    $('.projectContainer').hide();
});

HTML：

<!-- clickable image -->
<img src="http://soumghosh.com/otherProjects/natalierosscms/wp-content/uploads/2013/03/T1Main.jpg" alt="T1Main" width="559" height="745" class="alignnone size-full wp-image-181">

<!-- popup -->
<div class="projectContainer" style="padding: 10px; width: 110%; display: block;">
    <img class="closeButton" src="/otherProjects/natalierosscms/wp-content/themes/twentyeleven/images/closeButton.png">
</div>
4

1 回答 1

1

你有这个：

$(this).clone().appendTo('.projectContainer');

您将图像附加到projectContainer而不清除第projectContainer一个（因此图像每次都会继续构建）。所以你需要做的是清除以前的图像，然后插入新的图像。

但是里面projectContainer是你的关闭按钮，这让事情变得有点棘手。有很多方法可以解决这个问题，但直接的解决方案是引入另一个<div>, imageContainerinside projectContainer：

HTML：

<div class="projectContainer" style="display: none; padding: 10px; width: 110%;">
    <img class="closeButton" src="/otherProjects/natalierosscms/wp-content/themes/twentyeleven/images/closeButton.png">
    <div class="imageContainer"></div>
</div>

然后修改你的JS：

更改 JS：

//REPLACE the contents of imageContainer, not append to it.
//$(this).clone().appendTo('.projectContainer');
$('.projectContainer > .imageContainer').html($(this).clone());

达到这种效果的东西应该起作用。

于 2013-04-25T02:25:55.707 回答