Question

<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);
}

我正在尝试使用此代码轮换图标，但它不起作用，是否有人能够提供解决方案或并行代码？

Answer 1

您需要在document ready handler内移动代码，或者移动HTML末尾的脚本标记，以便仅在加载元素后运行。

<script>
  $(document).ready(function() {
    $(".rotation_90deg").click(function() {
      $(this).toggleClass("down");
    });
  });
</script>

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

如果动态添加元素，则应使用event delegation来侦听元素的click事件。

<script>
  $(document).ready(function() {
    $('body').on('click', '".rotation_90deg", unction() {
      $(this).toggleClass("down");
    });
  });
</script>

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

1 个答案: