javascript - 如何从单页上的 10 张图片中只旋转一张图片

Question

我试图从我的页面上生成的多个图像中只旋转一个图像。但是这样做会旋转所有图像。
每张图片都以模式打开，然后使用按钮旋转。

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog" style = "max-width:90%; max-height:90%">
    <div class="modal-content">
        <div class="modal-body ">
            <img class="showimage img-responsive" src="" style = "max-width:90%"/>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" >Rotate</button>
        </div>
    </div>
</div>
</div>
<script>
$(document).ready(function () {
$('img').on('click', function () {
    var image = $(this).attr('src');
    //alert(image);
    $('#myModal').on('show.bs.modal', function () {
        $(".showimage").attr("src", image);
    });
});
});

</script>

此代码位于表格中的每个新行中

Answer 1

如果图像是动态加载的，这里是一个如何实现旋转的例子。为了单独旋转图像，我创建了一个旋转变量，当您点击一只新猫时该变量会被重置。

var rotation = 0

$('img').on('click', function () {
    var image = $(this).attr('src');
    $('.showimage').attr('src', image);
    rotation = 0;
    rotate(0)
    $('#myModal').modal('show');
});

$('.rotate').on('click', function () {
      rotation += 45;
      rotate(rotation)
});

function rotate(deg) {
  $('.showimage').css({
      '-webkit-transform' : 'rotate('+ deg +'deg)',
      '-moz-transform' : 'rotate('+ deg +'deg)',
      '-ms-transform' : 'rotate('+ deg +'deg)',
      'transform' : 'rotate('+ deg +'deg)'
  });
}

.image-wrapper {
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<img src="https://placekitten.com/300/200" />
<img src="https://placekitten.com/300/150" />
<img src="https://placekitten.com/300/100" />

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog" style = "max-width:90%; max-height:90%">
    <div class="modal-content">
        <div class="modal-body ">
            <div class="image-wrapper">
              <img class="showimage img-responsive" src="" style = "max-width:90%"/>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-default rotate">Rotate</button>
        </div>
    </div>
</div>
</div>