How to condense this jquery code?

Question

Looking for help to shorten this code block:

Edit: This is a portion of the "list" (3 shown here) but my actual code has 6.

<script>
 $('.clickme-newyork, #link4, #link8, #link9').hover(function() {
 $(".card-cp").addClass("card-bg-cp");
 $(".card-gv").addClass("card-bg-gv");
 $(".card-hcm").addClass("card-bg-hcm"); 
 }); 
</script>

This did NOT work correctly:

<script>
 $('.clickme-newyork, #link4, #link8, #link9').hover(function() {
 $(".card-cp, .card-gv, .card-hcm").addClass("card-bg-cp, card-bg-gv, card-bg-hcm");
 }); 
</script>

• Mojtaba: you need to write a simple function
• Amit: In this case you're in the sweet spot of keeping it as it is. If you have this type of code many times, or if the "list" grows longer, create a function that takes 2 strings (selector, class) and does the operation. They call this function with values from a list.
• ceejayoz: Why not $(".card-cp, .card-gv, .card-hcm").addClass("bg"); and have a CSS rule for .bg?

Answer 1

Extrapolating the comments, you need to decide whether "condensing" your code is really necessary. As @Mojtaba said, you can write a function that does this work programatically. For instance:

function myAddClass(target, classname) {
 $(target).addClass(classname);
}

Then you would do...

<script>
 $('.clickme-newyork, #link4, #link8, #link9').hover(function() {
 myAddClass(".card-cp","card-bg-cp");
 .... 
 }); 
</script>

Not very 'shortened', is it?

However if you have a lot of these to do, you can put them into an array and loop through them with your myAddClass() function. That might save you some space - but the real question is this: does the shortcut make code shorter (or easier to read)? Generally speaking, the jQuery library already provides great shortcuts to what would otherwise be verbose code blocks. So maybe your best bet is to leave your code as it is.

Answer 2

You can try

var classMap = [
 [".card-cp","card-bg-cp"],[".card-gv","card-bg-gv"],[".card-hcm","card-bg-hcm"]
];
$(".clickme-newyork, #link4, #link8, #link9").hover(
 function() { // when the mouse pointer enters the element.
 $.map( classMap, function( c, i ) { $( c[0] ).addClass( c[1] ); });
 });

made a JSFiddle to see the result https://jsfiddle.net/sysdevcode/u7kfsf65/

Link to Jquery Map: http://api.jquery.com/map/

Answer 3

$('.clickme').hover(function() {
 $(".card-cp, .card-gv, .card-hcm").addClass(function(index, className){
 switch(className){
 case 'card-cp': return 'card-bg-cp';
 case 'card-gv': return 'card-bg-gv';
 case 'card-hcm': return 'card-bg-hcm';
 }
 });
 });

Fiddle: https://jsfiddle.net/red2678/20Lurcx2/8/