如何使用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); 
    }; 
});

來源

2017-08-14 Johnny G.

你可以包含你在問題中描述的代碼嗎？ – 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

來源

2017-08-14 05:16:57

非常感謝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()它

來源

2017-08-14 06:00:24 ewwink

如何使用jQuery刪除位於不同div容器中的附加圖像？

回答

相關問題