gpt4 book ai didi

javascript - 使用 JavaScript 旋转图标无法正常工作

转载 作者:太空宇宙 更新时间:2023-11-04 02:14:45 25 4
gpt4 key购买 nike

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

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com