Javascript 如何从单个页面上的10个图像中仅旋转一个图像

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

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

接近
旋转
$（文档）.ready（函数（）{
$（'img'）。在（'click'，函数（）{
var image=$（this.attr（'src'）；
//警报（图像）；
$（'#myModal'）.on（'show.bs.modal'，function（）{
$（“.showimage”）.attr（“src”，image）；
});
});
});

此代码位于表中的每一新行中

---

如果是您生成的，请给他们ID

<img id="myimg1" src=""/>

---

目标图像由

.showimage

类标识

但是您的旋转按钮没有类或ID。请向该按钮添加标识符，然后注入单击事件以旋转图像。将

rotate image

id添加到按钮：

旋转

然后在JavaScript中：

$(document).ready(function () {
  $('img').on('click', function () {
    var image = $(this).attr('src');
    //alert(image);
    $('#myModal').on('show.bs.modal', function () {
      var shownImage = $(".showimage");
      shownImage.attr("src", image);

      // Remove the rotation class when modal is re-opened.
      shownImage.removeClass('rotated-image');
    });
  });

  // Add rotate event.
  $("#rotate-image").on('click', function () {
    // Add the rotation class.
    $(".showimage").addClass('rotated-image');
  });
});

---

如果图像是动态加载的，下面是如何实现旋转的示例。为了单独旋转图像，我创建了一个旋转变量，当您单击一个新的cat时，该变量将被重置

var旋转=0
$（'img'）。在（'click'，函数（）{
var image=$（this.attr（'src'）；
$（'.showimage'）.attr（'src'，image）；
旋转=0；
旋转（0）
$（'myModal'）.modal（'show'）；
});
$（'.rotate'）。在（'click'，函数（）{
旋转+=45；
旋转（旋转）
});
功能旋转（度）{
$（'.showimage'）.css({
“-webkit变换”：“旋转（“+deg+”deg）”，
“-moz变换”：“旋转（“+deg+”deg）”，
“-ms变换”：“旋转（“+deg+”deg）”，
“变换”：“旋转（'+deg+'deg）”
});
}

。图像包装器{
溢出：隐藏；
}

接近
旋转

jquery中还有一个：n子选择器，但我认为您可以直接使用smth，比如$（this）。单击事件按钮查找（'img'）这是非常出色的回答！非常感谢你的贡献这个答案并没有解决我的问题：）我以前确实尝试过这个方法，但失败了。无论如何谢谢你

$(document).ready(function () {
  $('img').on('click', function () {
    var image = $(this).attr('src');
    //alert(image);
    $('#myModal').on('show.bs.modal', function () {
      var shownImage = $(".showimage");
      shownImage.attr("src", image);

      // Remove the rotation class when modal is re-opened.
      shownImage.removeClass('rotated-image');
    });
  });

  // Add rotate event.
  $("#rotate-image").on('click', function () {
    // Add the rotation class.
    $(".showimage").addClass('rotated-image');
  });
});