javascript - 在 JS/jquery 的帮助下动态地从模态中删除图像

Question

在我的网页上有 Gridster 小部件，其中有多个图像。可以使用 + 按钮添加图像。

当我按下 + 时，会打开一个模态，用户可以在其中添加多个图像，并在单击 Add Image 时将这些图像添加到小部件上。

小部件上的图像在带有 class=imagenames

的小部件上的 textarea 中有地址

我想要实现的目标

当模式打开时，它当前显示所有图像。但我希望该模式仅显示所有图像中那些不在该特定小部件上的图像

我的方法是什么

当我点击 + 按钮时，函数 $(document).on("click", ".addmorebrands", function() 被打开，我试图提取类 imagenames 的 textarea，然后删除该图像，这样图像就不会显示。

图片的形式是

 <div class="modal-body">

      <!--  Images which I retrieve from backend for now they are 
      hardcoded paths and actually are dynamic(No fixed number)-->


<div class="outerdiv"><img class="img-fl" src="https://cdnd.icons8.com/wp-content/uploads/2015/07/Run-Command-100.png"></div>
      <div class="outerdiv"><img class="img-fl" src="https://png.icons8.com/metro/2x/chapel.png"></div>
      <div class="outerdiv"><img class="img-fl"src="https://png.icons8.com/metro/2x/boy.png"></div>
      <div class="outerdiv"><img class="img-fl"src="https://png.icons8.com/metro/2x/wacom-tablet.png"></div>

      </div>

+ 按钮被按下时触发的函数

  $(document).on("click", ".addmorebrands", function() {
        parentLI = $(this).closest('li');
        $('#exampleModalCenter').modal('show');
    });

    $('#exampleModalCenter img').click(function(){
        parentdiv = $(this).closest('div.outerdiv');
        if (parentdiv.hasClass('preselect')) {

            parentdiv.removeClass('preselect');
            selectedImageSRC = selectedImageSRC.replace($(this).attr('src'),"");
            selectedImageSRC = trimChar(selectedImageSRC, ',');
            selectedImageSRC = (selectedImageSRC.replace(/,,/g , ","));
            console.log("In remove");
            console.log(selectedImageSRC);
            console.log("Parent Div in remove");
            console.log(parentdiv);
        }else {

            parentdiv.addClass('preselect');

            if (selectedImageSRC === '') {

                selectedImageSRC += $(this).attr('src');

            } else {

                selectedImageSRC += ',' + $(this).attr('src');
            }

            console.log("In add");
            console.log(selectedImageSRC);
            console.log("Parent Div in Add");
            console.log(parentdiv);
        }     
});

我想以某种方式编辑上述功能，以便每次打开模态时，它都会根据小部件上的图像动态显示图像

Fiddle代表整个工作

Answer 1

在 $('#exampleModalCenter').modal('show'); in $(document).on("click", ".addmorebrands"之后将这些行添加到您的代码中", 函数()。

代码片段

$(".outerdiv").find('img').closest('div').css({"display":"inline-block"});
parentLI.find( '.imagewrap .images' ).each(function(index,item){ 
    $(".outerdiv").find('img[src$="'+$(this).attr('src')+'"]').closest('div').css({"display":"none"});

});

更新了 jsfiddle:https://jsfiddle.net/z684xzhn/