如何从图像数组中查找图像并使用Jquery将其放入模态窗口中？

Question

我正在尝试做文章预览功能，使用Jquery在模态窗口中显示标题，文本，标签和图像。到目前为止，我已设法完成标题和文本。

问题是图像和标签。我目前有三张图片供我选择，但未来可能会有所改变。

图像的路径显示在源代码中，因此没有问题。

问题是Jquery的东西。我想我必须做一个$ .each函数或其他东西，但到目前为止我只获得了所有的图像路径，或者它在模态窗口中显示了Object对象。

有人可以帮我弄这个吗？

这是表格的一部分。

<div class="form-group form-check">
 @foreach($images as $image)
  <input type="radio" class="form-check-input" name="images" value="{{$image->id}}" />
  <label for="image_name" class="form-check-label">{{$image->name}}</label>
  <img class="my-card-img" src="{{asset('storage'.$image->path)}}"/>
 @endforeach
</div>
<button  id="preview" type="button" class="btn btn-primary" >
    Preview
</button>

到目前为止，这是Jquery，但$ .each函数记录了所有图像路径。

$('#preview').click(function () {
  var previewModal = $('#previewModal');
  var title = $('input[name=title]').val();
  var body = $('textarea[name=body]').val();

  //This will log all the image paths.
  $(".my-card-img").each(function(){ 
    var imgSrc = $(this).attr("src");
    console.log(imgSrc);
   });

  previewModal.find('#title').text(title);
  previewModal.find('#body').text(body);
  previewModal.modal('show');
 });

源代码看起来像这样。

   <div class="form-group form-check">
          <input type="radio" class="form-check-input" name="images" value="1" />
  <label for="image_name" class="form-check-label">First image</label>
  <img class="my-card-img" src="path is ok"/>
        <input type="radio" class="form-check-input" name="images" value="2" />
  <label for="image_name" class="form-check-label">Image two</label>
  <img class="my-card-img" src="path is ok"/>
        <input type="radio" class="form-check-input" name="images" value="3" />
  <label for="image_name" class="form-check-label">Image three</label>
  <img class="my-card-img" src="path is ok"/>
      </div>

Answer 1

我创建了与您的场景相同的示例html。我已经包含了三个div与类子图像，你可以在laravel @foreach循环中生成你的图像。我将所有图像包装在具有“image-container”类的div中

在你的情况下作为一个例子

 @foreach($images as $image)
<div class="child-image">
        <input type="radio" class="form-check-input" name="images" value="{{$image->id}}" />
        <label class="form-check-label">{{$image->name}}</label>
        <img style="width: 50px;" class="my-card-img" src="{{asset('storage'.$image->path)}}" />
    </div>
@endforeach

在你的HTML中

<div id="image-container">
    <div class="child-image">
        <input type="radio" class="form-check-input" name="images" value="1" />
        <label class="form-check-label">Sri Lanka</label>
        <img style="width: 50px;" class="my-card-img" src="https://restcountries.eu/data/lka.svg" />
    </div>
    <div class="child-image">
        <input type="radio" class="form-check-input" name="images" value="2" />
        <label class="form-check-label">India</label>
        <img style="width: 50px;" class="my-card-img" src="https://restcountries.eu/data/ind.svg" />
    </div>
    <div class="child-image">
        <input type="radio" class="form-check-input" name="images" value="3" />
        <label class="form-check-label">Ireland</label>
        <img style="width: 50px;" class="my-card-img" src="https://restcountries.eu/data/irl.svg" />
    </div>

    <button id="preview" type="button" class="btn btn-primary">
        Preview
    </button>
</div>

对于Modal，我使用了bootstrap

<div class="modal" tabindex="-1" role="dialog" id="previewModal">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">Modal title</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 style="width: 50px;" class="my-card-img" src="" />
            <p id="image_name"></p>
        </div>
        <div class="modal-footer">

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

并从点击的单选按钮获取图像和名称使用jQuery

   $(document).ready(function() {
    $('#preview').click(function() {
        var selectedImage = $("input[type='radio']:checked"); // gets the selected checkbox from all radios
        var image_childWrapper = selectedImage.parent(); // selects the parent of the selected radio button
        var imageSrc = image_childWrapper.find("img").attr("src"); // find the correspondence image to that selected radio button 
        var imageName = image_childWrapper.find("label").html(); // gets the image name

        var previewModal = $('#previewModal');
        $("#image_name").html(imageName); // sets the image nam on modal paragraph tag
        previewModal.find('.modal-body').find("img").attr("src", imageSrc); // sets the modal window image source  for display
        previewModal.modal('show'); // show the modal
    });
});

选择图像名称和图像源我在这里有html标签。