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。我在类 child-image 中包含了三个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，我只是使用了引导程序

<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标签。

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

1 个答案: