-1

I'm new to jquery and just stuck at this.

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

how can I shorten this code so that i only have to write the function for once and it works the same.

Phil
  • 157,677
  • 23
  • 242
  • 245
Devesh Kumar Meena
  • 1
  • 1
  • Welcome to stackoverflow. This type of question is likely off topic in stackoverflow. Questions about code optimisation are more suitable at CodeReview: https://codereview.stackexchange.com/ . Stackoverflow is usually about code that does not work instead. – briosheje May 09 '19 at 05:23
  • What are `fa`, `fb`, etc? If they weren't all different, I'd say to use a formula (can still use a formula and an array, but it seems a bit odd) – CertainPerformance May 09 '19 at 05:24
  • What is `$(this).parent(this)` meant to do? jQuery's [`.parent()`](https://api.jquery.com/parent/#parent-selector) only accepts a `String` selector – Phil May 09 '19 at 05:25
  • @briosheje This question is too non-specific for Stack Overflow, but also lacks enough concrete detail and context to be an acceptable question on Code Review. – 200_success May 09 '19 at 05:48
  • @200_success the code **does** work and has no problems other than needing to be reviewed / optimised. Is it fine here? Reading this: https://meta.stackoverflow.com/questions/261841/can-i-post-questions-about-optimizing-code-on-stack-overflow I think it's not, but I might be wrong, of course. – briosheje May 09 '19 at 05:52
  • @briosheje If you can devise a title that summarizes what the code should accomplish, then it might be an acceptable Stack Overflow question. Otherwise, if the title is just some variant of "Please improve my code" — which the current title is — then I'd say it's not appropriate for Stack Overflow. – 200_success May 09 '19 at 05:55
  • @200_success so you do agree with me that it's off topic here? :P – briosheje May 09 '19 at 05:57
  • @briosheje I've already voted to close this question on Stack Overflow as "Too broad". But [the existence of Code Review and whether this question is suitable for Code Review has nothing to do with that assessment](https://meta.stackoverflow.com/q/313266/1157100). – 200_success May 09 '19 at 06:01

1 Answers1

1

Try like this. assign your classes in a array and loop through it.

$(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>
Syed mohamed aladeen
  • 6,507
  • 4
  • 32
  • 59