Question

我有一个主图像，当我点击该图像时，打开一个模态框，其中有3个图像。因此，当我单击模态框中的一个图像时，它必须与主图像交换我不知道如何做到这一点。请帮我，我的代码在这里

<a href="#" data-toggle="modal" data-target="#myModal"><img class="img responsive curtain1"id="1" src="curtain.jpeg" ></a>

<!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Modal Header</h4>
  </div>
  <div class="modal-body">
    <div class="row">
    <div class="col-sm-4" id = "1">
    <img src="curtaina1.jpg"style="height:35%;width:45%;" alt="one">
    </div>
    <div class="col-sm-4" id = "2">
    <img src="curtaina1.jpg"style="height:35%;width:45%;"alt="two">
    </div>
    <div class="col-sm-4" id = "3">
    <img src="curtaina1.jpg"style="height:35%;width:45%;"alt="three">
    </div>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>

Answer 1

要交换图像，只需将图像路径替换为当前图像。

<a href="#" data-toggle="modal" data-target="#myModal">
    <img class="img responsive curtain1" id="mainImage" src="curtain.jpeg" >
</a>

<!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Modal Header</h4>
  </div>
  <div class="modal-body">
    <div class="row">
    <div class="col-sm-4" id="1">
    <img src="curtaina1.jpg"style="height:35%;width:45%;" alt="one" class="image1">
    </div>
    <div class="col-sm-4" id="2">
    <img src="curtaina1.jpg"style="height:35%;width:45%;"alt="two" class="image2">
    </div>
    <div class="col-sm-4" id="3">
    <img src="curtaina1.jpg"style="height:35%;width:45%;"alt="three" class="image3">
    </div>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>

要进行交换，请使用以下jQuery：

$('.image').click(function() {
    $("#mainImage").attr('src',$(this).attr('src'));
})

请尝试此代码。

如何使用jquery交换图像？

1 个答案: