Construct jQuery selector out of multiple variables

Question

I'm trying to make my jQuery code less repetitive by constructing a selector out of two variables.

I would like to put the class 'legend' and the second classname in two separate variables and combine them as one selector.

My HTML

 <div class="legend a">
    <div class="icon"></div>
        <p class="description">Autmotive</p>
    <div class="switch"></div>
 </div>
 <div class="legend b">
    <div class="icon"></div>
        <p class="description">Power Conversion</p>
    <div class="switch"></div>  
 </div>
 <div class="legend c">
    <div class="icon"></div>
        <p class="description">Charger Switches</p>
    <div class="switch"></div>
 </div>

My jQuery

$('.legend.a').hover(
  function () { $('.call-out.a').find('.icon').addClass('hover')},
  function () { $('.call-out.a').find('.icon').removeClass('hover')}
);

$('.legend.b').hover(
  function () { $('.call-out.b').find('.icon').addClass('hover')},
  function () { $('.call-out.b').find('.icon').removeClass('hover')}
);

$('.legend.c').hover(
  function () { $('.call-out.c').find('.icon').addClass('hover')},
  function () { $('.call-out.c').find('.icon').removeClass('hover')}
);

I tried:

var firstClass = $('.legend').attr('class').split(' ')[0];
var secondClass = $('.legend').attr('class').split(' ')[1];
var legend = $('.'+ firstClass +'.'+ secondClass +'');

But it's targeting all elements. How can I target legend.a, b or c separately?

Thanks

Justin Bicknell · Accepted Answer · 2013-04-26 15:34:15Z

3

I would add a data attribute to specify the target class:

 <div class="legend a" data-target="a">

Then your js can be more generic, like:

$('.legend').hover(
  var target = $(this).data('target');
  function () { $('.call-out.' + target).find('.icon').addClass('hover')},
  function () { $('.call-out.' + target).find('.icon').removeClass('hover')}
);

answered Apr 26, 2013 at 15:34

Justin Bicknell

4,81620 silver badges27 bronze badges

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

Comments

Selvakumar Arumugam · Accepted Answer · 2013-04-26 15:44:49Z

0

How about generalizing the hover function like below,

//  v-- Seleact all legend
$('.legend').hover(
  function () { 
     var targ  = $(this)[0].className.split(' ')[1];
     $('.call-out.' + targ).find('.icon').addClass('hover')
  },
  function () { 
     var targ  = $(this)[0].className.split(' ')[1];
     $('.call-out.' + targ).find('.icon').removeClass('hover')
  }
);

edited Apr 26, 2013 at 15:44

answered Apr 26, 2013 at 15:38

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

2 Comments

Justin Bicknell Over a year ago

I think you are meaning to split on the class attribute, not the element itself

Selvakumar Arumugam Over a year ago

@JustinBicknell You are right.. Thanks and corrected the answer.

Collectives™ on Stack Overflow

Construct jQuery selector out of multiple variables

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related