CODEWITHSUNDEEP
jquery
Scott Pedder
Scott Pedder

Reputation: 57

I would like to clean this jQuery code up, any suggestions?

I would like to clean this jQuery code up, any suggestions? I have about 20 cities to add. This code adds CSS class to each city when rolled over area on a map.

$("#Auckland").mouseover(function(){                                                
                $(".Auckland").addClass("area");        
        }); 

        $("#Auckland").mouseout(function(){                                             
                $(".Auckland").removeClass("area");     
        }); 

        $("#Northland").mouseover(function(){                                               
                $(".Northland").addClass("area");       
        }); 

        $("#Northland").mouseout(function(){                                                
                $(".Northland").removeClass("area");        
        }); 

        $("#Rodney").mouseover(function(){                                              
                $(".Rodney").addClass("area");      
        }); 

        $("#Rodney").mouseout(function(){                                               
                $(".Rodney").removeClass("area");       
        });

Upvotes: 1

Views: 62

Answers (4)

Tats_innit
Tats_innit

Reputation: 34107

Plz Try this Chaining them together :)

The obvious benefit is you write less code. It’s easier and faster to write—and to manage. But your code also runs faster. Look at the first snippet without chaining. Every single row tells jQuery to first search the entire DOM for an object, and then run a method on that object. When we use chaining, jQuery only has to search for the object one single time. 

$("#Auckland,#Northland,#Rodney").mouseover(function() {
    $(this).addClass("area"); // you can do - > $("." + this.id) if you want to add calss to all the emelents with taht class
     // you can do - > you can also change it with the class name depending your needs
});

$("#Auckland,#Northland,#Rodney").mouseout(function() {
    $(this).removeClass("area");
});

good read: http://tobiasahlin.com/blog/quick-guide-chaining-in-jquery/

& http://www.jquery-tutorial.net/introduction/method-chaining/

Upvotes: 2

Ram
Ram

Reputation: 144689

you can add a class like cities to all elements and try this:

$(".cities").mouseover(function(){                                                
     $("." + this.id).addClass("area");        
}); 

$(".cities").mouseout(function(){                                                
     $("." + this.id).removeClass("area");        
});

Upvotes: 2

Valerij
Valerij

Reputation: 27748

$('#Auckland,#Northland,#Rodney').hover(function(){
     $('.'+this.id).addClass("area");
},function(){
     $('.'+this.id).removeClass("area");
});

Upvotes: 2

raina77ow
raina77ow

Reputation: 106375

I suppose that can be written just as...

$('#Auckland, #Northland, #Rodney').hover(function() {
  var targetClass = this.id;
  $('.' + targetClass).addClass('area'); 
}, function() {
  var targetClass = this.id;
  $('.' + targetClass).removeClass('area');
});

You (or someone) might be tempted to rewrite this with just toggleClass, but it's a false move, see: if someone refreshes a page holding a mouse over one of target items, hovering become screwed up. ) And this, I suppose, should work just right.

Upvotes: 1

Related Questions