1

我试图通过用两个变量构建一个选择器来减少我的 jQuery 代码的重复性。

我想将类 'legend' 和第二个类名放在两个单独的变量中，并将它们组合为一个选择器。

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

我的 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')}
);

我试过了：

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

但它针对所有元素。如何分别定位 legend.a、b 或 c？

谢谢

4

2 回答 2

3

我会添加一个数据属性来指定目标类：

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

然后你的js可以更通用，比如：

$('.legend').hover(
  var target = $(this).data('target');
  function () { $('.call-out.' + target).find('.icon').addClass('hover')},
  function () { $('.call-out.' + target).find('.icon').removeClass('hover')}
);
于 2013-04-26T15:34:15.007 回答
0

如何概括悬停功能，如下所示，

//  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')
  }
);
于 2013-04-26T15:38:20.170 回答