Jquery combine code

Question

Sorry for the really simple question but how could I combine below Jquery ? The question is how can I set :

 $('.cmb2 OR .cmb3 OR .cmb4').hover(function () 
 $('.cm2 OR .cm3 OR .cm4 DEPENDS ON WHAT IS HOVERED IN ABOVE LINE ').addClass('cmactive');

COMPLETE CODE :

 $('.cmb2').hover(function ()
 {
 $('.cmactive').hide();
 $('.cmactive').removeClass('cmactive');
 $('.cm2').addClass('cmactive');
 $('.cm2').show();
 });

$('.cmb3').hover(function ()
{
$('.cmactive').hide();
$('.cmactive').removeClass('cmactive');
$('.cm3').addClass('cmactive');
$('.cm3').show();
});

$('.cmb4').hover(function ()
{
$('.cmactive').hide();
$('.cmactive').removeClass('cmactive');
$('.cm4').addClass('cmactive');
$('.cm4').show();
});

Im sorry guys, I made a typo. Thanks for all the examples but I already was aware of this but the problem is I need to change an other class and not the class hovered. :( so hover .cmb1 change .someotherclass — BRDS
– BRDS, Commented Feb 3, 2015 at 23:24

Guffa · Accepted Answer · 2015-02-03 23:29:51Z

2

You can use the comma combinator to combine selectors:

$('.cmb2,.cmb3,.cmb4').hover(function ()

In the event handler the context (this) is the element where the event was triggered, so you can check the class of that element to find out what element to show.

$('.cmb2,.cmb3,.cmb4').hover(function () {
  $('.cmactive').hide().removeClass('cmactive');
  var target =
    $(this).hasClass('cmb2') ? '.cm2' :
    $(this).hasClass('cmb3') ? '.cm3' :
    '.cm4';
  $(target).addClass('cmactive').show();
});

edited Feb 3, 2015 at 23:29

answered Feb 3, 2015 at 23:16

Guffa

703k112 gold badges760 silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

BRDS Over a year ago

Your function works perfect, would you be so kind to explain me the : ? '.cm3' : '.cm4'; the first .cm2 I understand.

Guffa Over a year ago

@BRDS: It's using the conditional operator to select a value. The same as

var target; if ($(this).hasClass('cmb2')) { target = '.cm2'; } else if ($(this).hasClass('cmb3')) { target = '.cm3'; } else { target = '.cm4'; }

BRDS Over a year ago

Got it, did not understand the ? part.

Malk · Accepted Answer · 2015-02-03 23:17:08Z

1

Use commas to have a list of selectors, and if you assign it to a variable you can do work against all of them in the callback function.

var $cmbs = $('.cmb2, .cmb3, .cmb4');

$cmbs.hover(function () 
    $(this).addClass('cmactive');
    $cmbs.not(this).removeClass('cmactive');
});

answered Feb 3, 2015 at 23:17

Malk

12k4 gold badges35 silver badges34 bronze badges

2 Comments

BRDS Over a year ago

Im sorry, I made a typo. Thanks for all the examples but I already was aware of this but the problem is I need to change an other class and not the class hovered. :( so hover .cmb1 change .someotherclass

Malk Over a year ago

Have you thought about moving the targetting logic to the HTML? <div class='cmb1' data-target='.cm1'>, and having your function use that: var target = $(this).data('target')?

deweyredman · Accepted Answer · 2015-02-03 23:15:58Z

0

Why not add a common class to all three of them and then queue off of that? Alternatively you can use a CSS selector like this: $('[class^="cmb"]'). You can also select multiple classes by separating what you want with a comma, so you could do $('.cmb2, .cmb3, .cmb4')

answered Feb 3, 2015 at 23:15

deweyredman

1,4501 gold badge9 silver badges12 bronze badges

Collectives™ on Stack Overflow

Jquery combine code

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related