Question

基本上我在点击图像2按钮时尝试使用onclick事件来更改图像源。单击该部分最右侧的图像时，将弹出一个模态。在那个模式中，底部有两个按钮。图像一个按钮用于显示原始图像，图像二用于显示不同的图像。不确定我的代码有什么问题，我无法看到任何我忘记的东西。或者也许我只是在一开始就完全错了，非常感谢帮助。

.mDialogPhoto {
        width: 95%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .modal-body {
        padding: 0px;
    }
    .modal-backdrop.in {
        opacity: 0.8;
    }
    .modal-content {
        background-color: white;
    }
    .img-responsiveModal {
        margin-top: 20px;
        margin-bottom: 20px;
        display: block;
        width: 100%;
        height: auto;
    }
    .modal-dialog {
        margin-top: 50px;
    }

<section class="contentThree">
    <div class="container-fluid custom">
        <div class="row">
            <div class="col-md-12 hidden-xs hidden-sm">
                <h2 class="text-center photographyTitle">Shop</h2>
            </div>

<!-- Modal -->
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog mDialogPhoto" role="document">
    <div class="modal-content">
      <div class="modal-body">
          <div class="container-fluid">
              <div class="row">
                  <div class="col-sm-6 modal3ImgPrev">
                        <img class="img-responsiveModal" id="myImg" src='/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg'/>
                  </div>
                    <div class="paypal col-md-3">
                        <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
                    <input type="hidden" name="cmd" value="_s-xclick">
                    <input type="hidden" name="hosted_button_id" value="D9FWAKHUPWYXS">
                    <table>
                    <tr><td><input type="hidden" name="on0" value="Choose Size">Choose Size</td></tr><tr><td><select class="float-right" name="os0">
                        <option value="Size One">Size One $100.00 USD</option>
                        <option value="Size Two">Size Two $200.00 USD</option>
                        <option value="Size Three">Size Three $300.00 USD</option>
                        <option value="Size Four">Size Four $400.00 USD</option>
                    </select> </td></tr>
                    </table>
                    <input type="hidden" name="currency_code" value="USD">
                    <input class="paymentBtn1" type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
                    <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
                    </form>
                    </div>
              </div>
              <div class="row">
                  <button onclick="document.getElementById('myImg')src='/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg'">Image 1</button>
                  <button onclick="document.getElementById('myImg')src='/CMS_Static/Uploads/313864614C6F6F/DJI_0073-Recovered.jpg'">Image 2</button>
              </div>
          </div>
      </div>
    </div>
  </div>
</div>
        <div class="row">
            <div class="col-sm-8 col-sm-offset-2 col-md-offset-0 col-md-4 photoBG">
                <a type="button" data-toggle="modal" data-target="#myModal1"><img class="img-responsive center-block" src='/CMS_Static/Uploads/313864614C6F6F/photoImage1-1.jpg'/></a>
            </div>
            <div class="col-sm-8 col-sm-offset-2 col-md-offset-0 col-md-4 photoBG">
                <a type="button" data-toggle="modal" data-target="#myModal2"><img class="img-responsive center-block" src='/CMS_Static/Uploads/313864614C6F6F/DJI_0073-Recovered.jpg'/></a>
            </div>
            <div class="col-sm-8 col-sm-offset-2 col-md-offset-0 col-md-4 photoBG">
                <a type="button" data-toggle="modal" data-target="#myModal3"><img class="img-responsive center-block" src='/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg'/></a>
            </div>
        </div>
             <div class="col-md-4 col-md-offset-4 hidden-xs hidden-sm">
                    <a class="btn defaultBtn btn-block" href="/videography#photography">View More</a>
            </div>
             <div class="col-sm-8 col-sm-offset-2 visible-xs visible-sm">
                    <a class="btn defaultBtn btn-block" href="/videography#photography">View Photos</a>
            </div>
        </div>
    </div>
</section>

Answer 1

src之前需要一个点，它是getElementById()方法的属性。

document.getElementById('myImg').src = 
  '/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg';

Onclick事件无法正常工作

1 个答案: