Question

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

我怎样才能缩短这段代码，以便我只需要编写一次函数它的工作原理相同。

Answer 1

尝试这样。在数组中分配类并遍历它。

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

我如何优化这个jQuery

1 个答案: