<html>
<head>
<link rel="stylesheet" type="text/css" href="doll.css">
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../project/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../project/style.css" />
<link rel="stylesheet" type="text/css" href="../project/font-awesome-4.2.0/css/font-awesome.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
$(".rotation_90deg").click(function(){
$(this).toggleClass("down") ;
});
</script>
</head>
<body>
<a href="#"><div class="fa fa-anchor rotation_90deg"></div></a>
</body>
</html>
关联的 CSS:
.rotation_90deg{
-moz-transition: all 2s linear;
-webkit-transition: all 2s linear;
transition: all 2s linear;
}
.rotation_90deg.down{
-moz-transform:rotate(90deg);
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
我正在尝试使用此代码旋转图标，但它不起作用，有人可以提供解决方案或并行代码吗？
最佳答案
您需要在document ready handler 内移动代码或将 HTML 末尾的脚本标记移动到仅在加载元素后运行。
<script>
$(document).ready(function() {
$(".rotation_90deg").click(function() {
$(this).toggleClass("down");
});
});
</script>
.rotation_90deg {
-moz-transition: all 2s linear;
-webkit-transition: all 2s linear;
transition: all 2s linear;
}
.rotation_90deg.down {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".rotation_90deg").click(function() {
$(this).toggleClass("down");
});
});
</script>
<a href="#">
<div style="margin-top:200px" class="fa fa-anchor rotation_90deg">11</div>
</a>.rotation_90deg {
-moz-transition: all 2s linear;
-webkit-transition: all 2s linear;
transition: all 2s linear;
}
.rotation_90deg.down {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">
<div style="margin-top:200px" class="fa fa-anchor rotation_90deg">11</div>
</a>
<script>
$(".rotation_90deg").click(function() {
$(this).toggleClass("down");
});
</script>如果元素是动态添加的，那么你应该使用 event delegation监听元素的点击事件。
<script>
$(document).ready(function() {
$('body').on('click', '".rotation_90deg", unction() {
$(this).toggleClass("down");
});
});
</script>
关于javascript - 使用 JavaScript 旋转图标无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39076204/