Question

我是jQuery的新手，真的需要帮助才能想出这个。我需要一个脚本：

将图像容器中的图像添加到其他父div容器中。
确定图像是否已添加到div
限制可添加到新父div的图像数量
从新的父div中删除图像onclick
再次在原始容器中显示图像以进行添加。

**如果我们之后可以在jquery $ .post中发送div图像值（src或title），这将是锦上添花。

我似乎有1,3和4工作。然而2和5让我疯了。也许有人在某个地方跑这个？

这就是我已经拥有的东西（万一它有所帮助。我觉得我离开了。）

$(document).ready(function(){

    $('img.selectImage').click( function(e){
        e.preventDefault();

        var src = $(this).attr('src');
        var title = $(this).attr('title');
        var addimg = '<img class="added" src="' + src + '" title="' + title + '" height="50" width="50" />';    
        //first lets count the elements within the div.
        var number = $('#imgBox img').length;
        var imgMax = '5';
        if(number == imgMax){
            alert('You are at the max amout of images / 5');
        }//<!-end if tag

        //if the count is less than five we can add an image.   
        else {  
            $(this).css('border','1px solid #000');
            $('#addText').hide();   
            $('#imgBox').append(addimg);

            //we need to be able to remove the image also. 
            $('#imgBox img').click(function(e){
                e.preventDefault();
                $(this).remove();
            });

        }//<!-end else tag

    });
});

Answer 1

只需添加条件检查点击图像的src，您就可以看到是否已经添加了它。条件如下：

if(!$('#imgBox').find('[src="'+src+'"]').length)

然后，为了删除边框，我保存了单击的元素并在其他单击功能中重复使用它。最终代码如下所示：

if(!$('#imgBox').find('[src="'+src+'"]').length){
    var theImage = $(this);
    $(this).css('border','1px solid #000');
    $('#addText').hide();   
    $('#imgBox').append(addimg);

    //we need to be able to remove the image also. 
    $('#imgBox img').click(function(e){
        e.preventDefault();
        theImage.css('border', 'none')
        $(this).remove();
    });
}

小提琴：http://jsfiddle.net/LnqBt/5/

jQuery在Div容器中添加和删除图像

1 个答案: