Jquery clone( ) 函数不适用于 toggleClass( )。试图克隆图像但图像从当前位置移动

Question

当用户单击图像时，我希望将其克隆为固定且更大的图像，但是当我尝试使用 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>

Answer 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++;
        }
    });
});

Answer 2

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

JS

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;
}

Answer 3

基本上我也在想.insertAfter(this)idea。添加了 fiddle 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--;       
            });
    });

});

Jquery clone( ) 函数不适用于 toggleClass( )。试图克隆图像但图像从当前位置移动

Jquery clone( ) function not working with toggleClass( ). Trying to clone image yet image moves from current location

html

javascript

css

jquery

clone