javascript - 单击图像应该在 html 的 Bootstrap 主体内显示它吗？

Question

HTML 代码:

   <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>

这是我的 html 代码。在这里它被视为缩略图。单击此图像时，相应的图像应在 Bootstrap 面板主体上查看。

Bootstrap 模式主体:

  <div class="modal-body" id="modal-content">
    <div class = "row">
    <div class="col-sm-12">

    <div class = "col-sm-6" align="center">
    <div class="upload">
    <a href = "#" class = "thumbnail">
      <img src="{{asset('4008-cam/AppIcon.appiconset/Icon-App-
      76x76@3x.png')}}" width="150" height="150">
      <button type="button" class="btn btn-primary" 
      onclick="window.location='';" align="center"><span 
          class="glyphicon glyphicon-upload"></span>Upload 
    photo</button>
    </a>
    </div>
    </div>

脚本代码:`

    $(document).ready(function() {
    $(document).on("click", ".upload1", function() {
    $(".upload").append('<img src="
    {{asset('**haghwaylitecontroller.jpg**')}}">');
    });
    });
    </script>

这是我的脚本代码。在这里它应该显示被点击的相应图像。通过给出它正在工作的图像的具体名称。但我需要的是，相应的图像应该显示在模态主体上。`

Answer 1

$('.imgimg').on('click', function () {

    var imageSRC = $(this).attr('src');
  console.log(imageSRC)
    //$('#MyModal').on('show.bs.modal', function  () {
     $(".someClass").attr("src", imageSRC);
      console.log("asddasasdasd")
//  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<img src="https://www.planwallpaper.com/static/images/maxresdefault.jpg" class="imgimg" width="500" data-toggle="modal" data-target="#myModal" >


<img src="https://www.w3schools.com/css/paris.jpg" class="imgimg" width="500" data-toggle="modal" data-target="#myModal" >

<div class="modal fade" id="myModal">
      <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 class="someClass" src="" width="150" height="150">

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

好的，首先你通过

获取点击图片的 src

$('.imgimg').on('click', function () {

    var imageSRC = $(this).attr('src');

请注意，imgimg 是每个应该显示在模态中的图片都应该具有的类。现在在模态中传递该参数，例如:

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

模态应该是这样的:

<div class="modal fade">
      <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 class="someClass" src="" width="150" height="150">

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