Question

这是我的JSFIDDLE

我有多个带有复选框的图像。当我检查时，相应的图像应创建复制到底部包装Div。当我取消选中它不应该创建副本.. 如何实现这一目标。？

提前致谢。

<div class="top-wrap">
    <img src="sampleImage.jpg">
    <input type="checkbox">
</div>

<div class="bottom-wrap">

</div>

Answer 1

我将添加data-属性以定位相应的图像FYI。

工作小提琴@ http://jsfiddle.net/RbJeL/7/

<div class="top-wrap">
    <img data-i="1" src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png">
        <input type="checkbox" data-t="1">
            <img data-i="2" src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png">
        <input type="checkbox" data-t="2">
            <img data-i="3" src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png">
        <input type="checkbox" data-t="3">
</div>

<script>
   $("input[type='checkbox']").on("click", function(){
        if( $(this).is(":checked") ) 
            $("img[data-i="+$(this).attr("data-t")+"]").appendTo(".bottom-wrap")
        else
            $("img[data-i="+$(this).attr("data-t")+"]").appendTo(".top-wrap")            
   });
 </script>


 <div class="bottom-wrap">
     <span>Selected Images</span> 
 </div>

Answer 2

您可以按照以下方式执行此操作：

$(function() {
    var imageId = 0;
    $('.top-wrap input[type=checkbox]').change(function() {
        var el = $(this);

        if (el.is(':checked')) {
            $('.bottom-wrap').append(el.prev('img').clone().attr('id', 'img-' + imageId));
            el.data('cloneId', 'img-' + imageId);
            imageId++;
        } else {
            $('.bottom-wrap #' + el.data('cloneId')).remove();
        }
    });
});

<强> Demo Link

隐藏/显示方法

$(function() {
    $('.top-wrap input[type=checkbox]').change(function() {
        var el = $(this);
        var clone = $('.bottom-wrap #img-' + el.index());
        if (el.is(':checked')) {
            if (clone.length) {
                clone.show();
            } else {
            $('.bottom-wrap').append(el.prev('img').clone().attr('id', 'img-' + el.index()));
            }
        } else {
            clone.hide();
        }
    });
});

<强> Demo Link (Hide/Show)

选中时创建图像的副本 - Jquery

2 个答案: