Question

我有一个图片库，我希望用户点击图片并在下面的单独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);
  };
 });

Answer 1

使用.index()类thumb的{{3}}容器，如果您将此信息作为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
  }
}

closest()

Answer 2

如果图片始终为id，则您不需要.index()或closest()，只需remove() 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();
   ...
   }

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

2 个答案: