时间戳

首页 > 解决方案 > 我怎样才能优化这个jquery

javascript - 我怎样才能优化这个jquery

问题描述

我是 jquery 的新手，只是坚持这一点。

  <script type="text/javascript">
      $(document).ready(function()
      {
        $(".f:nth-of-type(1)").hover(function(){
           $(this).parent(this).toggleClass('fa');
        });
        $(".f:nth-of-type(2)").hover(function(){
           $(this).parent(this).toggleClass('fb');
        });
        $(".f:nth-of-type(3)").hover(function(){
           $(this).parent(this).toggleClass('fc');
        });
        $(".f:nth-of-type(4)").hover(function(){
           $(this).parent(this).toggleClass('fd');
        });
      });    
   </script>

如何缩短此代码，以便我只需要编写一次函数并且它的工作原理相同。

标签： javascriptjquery

解决方案

试试这样。将您的类分配到一个数组中并循环遍历它。

$(document).ready(function()
{
  var classes = ["fa","fb","fc","fd"]
  for(i=1;i<=classes.length; i++){
    bindFn(i);
  }
  
  function bindFn(i){
    $(".f:nth-of-type("+i+")").hover(function(){
      $(this).parent(this).toggleClass(classes[i-1]);
    });
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="f">hi1</li>
  <li class="f">hi2</li>
  <li class="f">hi3</li>
  <li class="f">hi4</li>
</ul>

推荐阅读