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

目标图像由.showimage类标识。

但是您的旋转按钮没有类别或ID。向该按钮添加一个标识符，并注入click事件以旋转图像。将rotate-image ID添加到按钮：

<button id="rotate-image" type="button" >Rotate</button>

然后在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');
  });
});

Answer 2

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

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>

Answer 3

如果由您生成ID，请给他们ID。

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

通过这种方式，

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

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

3 个答案: