如何使用 laravel 中的不同图像在 bootstrap 主体内动态更改图像？

Question

Laravel 查看代码：

<div class="modal fade" id="images" role="dialog">
<div class="modal-dialog">

  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;
      </button>
      <h4 class="modal-title">Upload Images</h4>
      </div>
    <div class="modal-body" id="modal-content">
    <div class = "row">
    <div class="col-sm-12">

    <div class = "col-sm-6" align="center">
    <div >
    <a href = "#" class="upload" >
     <img src="" width="250" 
     height="250" class="someClass">
      <button type="button" align="center"><span class="glyphicon 
     glyphicon-upload"></span>Upload photo</button>
    </a>
    </div>
    </div>
    <div class="col-sm-6">
    <h3>Image Guidelines</h3><br/>
    Remember!!
    <ul>
    <li>Upload authentic product photos taken in bright lighting.</li>
    <li>Use clear color images with minimum resolution of 1100x1100px.
    </li>
    <li> Maximum Images supported :- 5</li>
     <li> Minimum Images required :- 1</li>
     <li>Minimum Image Resolution :- 1100x1100</li>
    <li>Image should be having pure white or light grey background.
     </li>
     <li>Image shouldn’t be blurred.</li>
      <li>Product should occupy 80% of space in image.</li>
    <li>Include all products in primary image (first image).</li>
   </ul>

  </div>
  </div>
  </div>
   <div>

  **<a  href="#">
  <img src="haghwaylitecontroller.jpg" alt="gemcamera" 
  style="width:150px" class="upload1">
  </a>
  <a href="#">
  <img src="lightningswitchmodule.jpg" alt="gemcamera" 
  style="width:150px" class="upload1">
  </a>
  <a href="#" >
  <img src="videodoorphone.jpg" alt="gemcamera" style="width:150px" 
  class="upload1">
  </a>**
    </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-
    dismiss="modal">CANCEL</button>
         <button type="submit" class="btn btn-default" id="login" 
    onclick="javascript:validate()">SAVE</button>
    </div>
  </div>

</div>

这是我在 laravel 视图中的引导代码。它包括在块中标记的图像的缩略图。单击图像时，相同的图像应显示在引导程序主体中（即，单击的图像应显示在引导程序主体内的图像源标记上，该标记具有类名someClass)

脚本代码：

<script type="text/javascript">

 $(document).ready(function() {
 $(document).on("click", ".upload1", function() {
 var imageSRC = $(this).attr('src');
// alert(imageSRC);

  $('#images').on('show.bs.modal', function () {
        $(".someClass").attr("src", imageSRC);
    });

 </script>

这是我尝试过的脚本代码。

Answer 1

将值存储在 imageSRC 变量中后，只保留这一行

$(".someClass").attr("src", imageSRC);