如何使用jQuery删除位于不同div容器中的附加图像？

问题描述：

我有一个图片库，我希望用户点击一个图片并在下面的一个单独的div容器中添加一个缩略图。如何使用jQuery删除位于不同div容器中的附加图像？

现在，当用户点击相同的大图像，我想删除其对应的小缩略图，并减少“选中图像”的计数器 - 以可切换的方式。

目前，我的代码允许用户点击图库中的较大图像，并在单独的容器#thumbnail_display上附加一个小缩略图，同时增加计数器值以反映所选图像的数量。

我的问题是，当我尝试从缩略图库中删除缩略图时。如何通过再次单击较大图像来检索相同的缩略图图像？我只是检索第一张图片，而不是点击的图片。

这是我到目前为止的codepen。感谢你的帮助！

下面的代码：

$(document).ready(function() { 
//DOM: image counter id 
    var $imageCounter = $("#image_counter"); 
    var media_file_counter = 0; 

    //DOM: gallery wrapper 
    var $thumbnailDisplayBox = $("#thumbnail_display"); 

    var $media_files = $(".thumbnail_overlay_container").find("img"); 

    //call function that shows "0 items selected" if there are no thumbnails in gallery 

    display_zero_items($thumbnailDisplayBox, $imageCounter); 

    $(".thumbnail_overlay_container").click(function() { 
     var img_source = $(this).children("img").attr("src"); 

     // this variable stores the button element that will have 
     toggleable classes for the checkmark 

     var $media_file_button = $(this).find("button"); 

     var $thumbnail_unit_container = 
     $('<divclass="expert_media_container"></div>'); 

     var $appended_thumbnail_unit_container = 
     $(".expert_media_container"); 

     var $thumbnailMedia = $('<img src="' + img_source + 
     '"/>').addClass("thumbnail_frame"); 

     // increase the counter 
     toggle_media($media_file_button, "hidden"); 

     function toggle_media(element, className) { 
     if (element.hasClass(className)) { 
      element.removeClass(className); 
      increase_counter(); 
      appendImage(img_source); 
     } else { 
      element.addClass(className); 
      decrease_counter(); 
      removeImage($appended_thumbnail_unit_container); 
     } 
     } 

     function appendImage(imgSrc) { 
     console.log("append image called- the image source", imgSrc); 
     $thumbnail_unit_container.append($thumbnailMedia); 
     $thumbnailDisplayBox.append($thumbnail_unit_container); 
     } 

     function removeImage(thumbnail_gallery_container) { 
     //if imgSource === imgSource of the thumbnail 
     // if(img_source === thumbnail.find('img').attr('src')){ 
     // thumbnail.remove(); 
     // } 
     console.log(
     "removed image", 
     thumbnail_gallery_container.find("img").attr("src") 
    ); 
    //remove the thumbnail 
    // console.log($thumbnail_unit_container.find('img')); 
    } 
    }); 

    //return index position of the media file 

    function display_zero_items(element, target) { 
    if (element.children().length === 0) { 
    target.text("0"); 
    } 
} 
function media_file_index_pos(parent, element) { 
    return parent.index(element); 
} 

var increase_counter = function() { 
    media_file_counter++; 
    $imageCounter.html(media_file_counter); 
}; 

    var decrease_counter = function() { 
    media_file_counter--; 
    $imageCounter.html(media_file_counter); 
    }; 
});

你可以包含你在问题中描述的代码吗？ – guest271314

刚刚编辑的问题，包括jQuery代码 –

不确定什么问题与代码在问题？ – guest271314

答

使用其容器.index()的closest()类thumb，你一定要瞄准正确的缩略图，如果你将此信息添加到它作为一个id。

这里是你的代码的相关部分：

var imgContainer = $(this).closest(".thumb").index();   // ADDED 
console.log("Container index: "+imgContainer);    // ADDED 

var $thumbnailMedia = $('<img id="thumb_'+imgContainer+'" src="' + img_source + '"/>').addClass( // MODIFIED 
    "thumbnail_frame" 
); 
//Store the index position of each media file 
var media_index = media_file_index_pos(
    $(".thumbnail_overlay_container"), 
    this 
); 

// increase the counter 
toggle_media($media_file_button, "hidden", imgContainer); // MODIFIED 

function toggle_media(element, className, imgContainer) { // MODIFIED 
    if (element.hasClass(className)) { 
    element.removeClass(className); 
    increase_counter(); 
    appendImage(img_source); 
    } else { 
    element.addClass(className); 
    decrease_counter(); 
    removeImage($appended_thumbnail_unit_container); 
    console.log("#thumb_"+imgContainer);     // ADDED 
    $(document).find("#thumb_"+imgContainer).remove();  // ADDED 
    } 
}

CodePen

非常感谢Louys！这正是我所需要的 –

您能否将答案标记为已接受？ –

答

如果图像总是id你不id

$(".thumbnail_overlay_container").click(function() { 
    ... 
    var img_id = $(this).children("img").attr("id"); 
    ... 
    //append "thumb_" to exiting id 
    var $thumbnailMedia = $('<img src="' + img_source + '" id="thumb_' + img_id + '" class="thumbnail_frame" />') 
    ); 

    function removeImage(thumbnail_gallery_container) { 
    $('#thumb_' + img_id).parent().remove(); 
    ... 
    }

需要 .index()或 closest()，只是 remove()它

如何使用jQuery删除位于不同div容器中的附加图像？

相关推荐