Question

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

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

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

由于

Answer 1

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

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

Answer 2

如下所述概括悬停功能

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

从多个变量构造jQuery选择器

2 个答案: