Question

在我的网页上有Gridster个窗口小部件。这些窗口小部件中都有可以删除的图像。现在，当用户点击它时，我有一个+按钮，会打开一个显示图像列表的模态。现在我希望用户选择一个图像（单击它），然后按Add Image，然后该图像应添加到指定的小部件中。

此外，以模态显示的图像从服务器中检索，因此我无法手动放置id之类的元素来区分它们。我认为jquery中的this将有助于获取单击的特定图像随之而来的是，添加的图像应该具有与现有图像相同的结构。

'<div class="imagewrap"><img src= image i click > <input type="button" class="removediv" value="X" /></div></div>';

我还希望使用我添加的图片的textarea更新src字段，就像使用其他现有图片一样。

HTML：

<div class="gridster">
    <ul>

    </ul>

</div>
<button class="js-seralize btn btn-success mr-2">Serialize</button>
<textarea id="log"></textarea>

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Add Icons</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

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






      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Add Image</button>
      </div>
    </div>
  </div>
</div>

JS：

var gridster;


gridster = $(".gridster ul").gridster({
  widget_base_dimensions: [100, 100],
  widget_margins: [5, 5],
  helper: 'clone',
   serialize_params: function($w, wgd) {return {images: $w.find('textarea').val().trim() , col: wgd.col, row: wgd.row, size_x: wgd.size_x, size_y: wgd.size_y}},
  resize: {
    enabled: true
  }
}).data('gridster');


 var json = [{
    "html": "https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png,https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png,https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png", //3 Images
    "col": 1,
    "row": 1,
    "size_y": 2,
    "size_x": 2
}, {
    "html":"https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png,https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png", // 2 Images
    "col": 4,
    "row": 1,
    "size_y": 2,
    "size_x": 2
},

{
    "html": "https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png", // 1 Image
    "col": 6,
    "row": 1,
    "size_y": 2,
    "size_x": 2
},


{
    "html": "https://image.flaticon.com/icons/svg/67/67994.svg,https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png",  // 2 Images
    "col": 1,
    "row": 3,
    "size_y": 1,
    "size_x": 1
}, {
    "html": "https://image.flaticon.com/icons/svg/67/67994.svg", //1 Image
    "col": 4,
    "row": 3,
    "size_y": 1,
    "size_x": 1
},

{
    "html": "https://image.flaticon.com/icons/svg/67/67994.svg,https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png", //2 Images
    "col": 6,
    "row": 3,
    "size_y": 1,
    "size_x": 1
}

];








for(var index=0;index<json.length;index++) {
    var images = json[index].html.split(',');
        var imageOutput = "";

        for(var j = 0; j < images.length; j++) {
        imageOutput += '<div class="imagewrap"><img src='+ images[j] +'> <input type="button" class="removediv" value="X" /></div></div>';
        }

gridster.add_widget('<li class="new" ><button class="addmorebrands" style="float: left;">+</button><button class="delete-widget-button" style="float: right;">-</button>' + imageOutput + '<textarea>'+json[index].html+'</textarea></li>',json[index].size_x,json[index].size_y,json[index].col,json[index].row);
}









$('.removediv').on('click', function () {
  $(this).closest('div.imagewrap').remove();
});


 $(document).on("click", ".delete-widget-button", function() {
        var gridster = $(".gridster ul").gridster().data('gridster');
        gridster.remove_widget($(this).parent());
    });


$('.js-seralize').on('click', function () {
    var s = gridster.serialize();
    $('.gridster ul li').each((idx, el)=>{ // grab the grid elements
       s[idx].html = $('textarea', el).html(); // add the html key/values

    json_variable=JSON.stringify(s)
   });



    $('#log').val(json_variable);
});

$(document).on("click", ".addmorebrands", function() {
        $('#exampleModalCenter').modal('show');

    });

有人请帮助我，因为我发现很难得到它

Fiddle Link

Answer 1

添加图像部分现在已启动并运行，至少在其原始版本中已修改并添加了本节中的一些代码：

//EDITS
var parentLI;
$(document).on("click", ".addmorebrands", function() {
    parentLI = $(this).closest('li');
    $('#exampleModalCenter').modal('show');
    $('#exampleModalCenter img').click(function(){
        $(this).addClass('preselect');
        $(this).siblings().removeClass('preselect');
        selectedImageSRC = $(this).attr('src');
    });
});

$('#add-image').click(function(){
    parentLI.append('<div class="imagewrap"><img src="'+selectedImageSRC+'"> 
    <input type="button" class="removediv" value="X" /></div>');
    parentLI.children('textarea')
       .append(', '+selectedImageSRC);
    $('#exampleModalCenter').modal('hide');
});

这也是：

.preselect{
  border: 2px solid white;
  background: green
}

.preselect:hover{
  border: 1px solid white;
  background: lightgreen
}

我会给你一个调整每个单元格中图像大小的部分，以及其他所有内容:) https://jsfiddle.net/0ndht0zh/23/

<强>更新

此代码仅适用于运行时存在的.removediv：

$('.removediv').on('click', function () {
    $(this).closest('div.imagewrap').remove();
});

这就是为什么预先存在的图像会被删除但不会删除以后添加的图像的原因。我不是专家，所以请研究更多的技术解释，但基本上是：

以下代码几乎完全相同，除非它附加到document（但是已应用到.removediv），这个代码在运行时实际存在，总会找到.removediv的方式。

$(document).on('click', '.removediv', function () {
    $(this).closest('div.imagewrap').remove();
});

更新小提琴：https://jsfiddle.net/0ndht0zh/27/

还记得在删除时更新textarea内容

使用JS / Jquery

1 个答案: