Jquery clone() 函数不能与 toggleClass() 一起使用。尝试克隆图像但图像从当前位置移动答案

【问题标题】：Jquery clone( ) function not working with toggleClass( ). Trying to clone image yet image moves from current locationJquery clone() 函数不能与 toggleClass() 一起使用。尝试克隆图像但图像从当前位置移动
【发布时间】：2018-12-30 11:47:10
【问题描述】：

当用户单击图像时，我希望将其克隆为固定且更大的图像，但是当我尝试使用 toggleClass() 函数时，图像会从我不想要的先前位置移动。我希望能够单击图像并获得更大的视图并能够将其切换回来，同时一次只能限制一个图像

var count = 1;
$(document).ready(function(){
    $(".img_box").click(function(){
        if(count<2){
        $(this).clone().attr({ 'class': 'img_box' + count }).appendTo(".zoom");
        $(this).toggleClass("zoom");
        count++;
        }
    });
});

.img_container {
    justify-content: center;
    display: inline-flex;
    margin: 5px;
    list-style: none;
}
.img_box {
    height: 100px;
    margin: 5px;
    cursor: pointer;
}
.img_box1 {
}
.zoom {
    position: fixed;
    max-width: 55%;
    height: 85%;
    left: -50%;
    right: -50%;
    top: 9%;
    margin: auto;
    padding: auto;
    z-index: 9999;
    border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class='img_container'>
<li><img class='img_box' src='http://3.bp.blogspot.com/-0llDSWL9Xm0/Ta0fJ3ulMDI/AAAAAAAAAAk/G5O-DfxD3PI/s1600/7.jpg' ></li>
</div>

<div class='img_container'>
<li><img class='img_box' src='https://ichef.bbci.co.uk/images/ic/1200x675/p049tgdb.jpg' ></li>
</div>

<div class='img_container'>
<li><img class='img_box' src='http://3.bp.blogspot.com/-uctFXnJjKvc/UCF-SlHorHI/AAAAAAAAAIU/Y4vtiVI1Jjk/s1600/animal+(5).jpg' ></li>
</div>

<div class='img_container'>
<li><img class='img_box' src='http://1.bp.blogspot.com/-g913BsBiiq4/UAFN4Z2XQBI/AAAAAAAADtc/EdyJQODnHBw/s1600/baby-animal-wallpapers-1.jpg' ></li>
</div>

【问题讨论】：

@fenghengzhi 的回答应该可以解决问题:)

标签： javascript jquery html css clone

【解决方案1】：

它应该可以工作。

var zoom = false;
$(document).ready(function(){
    $(".img_box").click(function(){
        if(!zoom){
        $(this).clone().attr({ 'class': 'img_box zoom' }).insertAfter(this).click(function(){$(this).remove();zoom=false;});
        //$(this).toggleClass("zoom");
        //count++;
        }
    });
});

【讨论】：

【解决方案2】：

基本上我也在考虑.insertAfter(this) 的想法。添加了一个小提琴here 猜测预期的功能。可以看看。

如果计数较大，我删除了缩放的图像并再次减少计数，以便可以单击和缩放新图像。

var count = 1;
$(document).ready(function(){
    $(".img_box").click(function(){
        if(count>1)
        {
        $('.img_box1').remove();
        count--;
        }
        $(this).clone().attr({ 'class': 'img_box' + count+' zoom' }).insertAfter(this);
        //$(this).toggleClass("zoom");
        count++;
        $(".img_box1").click(function(){
            $('.img_box1').remove();
            count--;       
            });
    });

});

【讨论】：

虽然没有碰过你的CSS。老实说，在此功能中，您不需要缩放类。您可以将缩放代码放在 img_box1 类中，它应该可以工作。
是的！这就是我一直在寻找的。谢谢。
我没有看到您的其他评论，并认为您的代码无法正常工作，哈哈，但是是的，我的缩放课程不好

【解决方案3】：

你可以这样做：https://codepen.io/creativedev/pen/PBpjVP

var count = 1;
$(document).ready(function(){
    $(".img_box").click(function(){
        if(count<2){
        $(this).clone().attr({ 'class': 'img_box' + count }).appendTo(".zoom");
        count++;
        }                                       $(this).toggleClass("zoom");
    });
});

CSS：

.img_container {
    justify-content: center;
    display: inline-flex;
    margin: 5px;
    list-style: none;
}
.img_box {
    height: 100px;
    margin: 5px;
    cursor: pointer;
}
.img_box1 {
}
.zoom {
    width: 100%;
    height: 100%;
    margin: auto;
    padding: auto;
    z-index: 9999;
    border: 1px solid blue;
}

【讨论】：