问jQuery --我如何简化它？
EN

Stack Overflow用户

提问于 2014-02-10 01:33:18

回答 11查看 140关注 0票数 1

我对jquery非常陌生，只对它的工作原理有非常基本的了解。这基本上就是我所拥有的，它工作的很好，但我想知道是否有一种方法来简化它，因为它看起来非常重复和笨重？我尝试过其他许多不同的方法，但我没有办法让它们发挥作用。

$(".legend.a").on("mouseenter", function() {
    $(".box").not(".a").css({"opacity": "0.4"});
}); 
$(".legend.b").on("mouseenter", function() {
    $(".box").not(".b").css({"opacity": "0.4"});
}); 
$(".legend.c").on("mouseenter", function() {
    $(".box").not(".c").css({"opacity": "0.4"});
}); 
$(".legend").on("mouseleave", function() {
    $(".box").css({"opacity": "1.0"});

这是html：

<div id="legend">
<div class="legend a">a</div>
<div class="legend b">b</div>
<div class="legend c">c</div>
</div>
<div id="box">
<div class="box a">a</div>
<div class="box b">b</div>
<div class="box c">c</div>
</div>

但是，我不仅有a、b和c类，还有另外6或7个类。类.box .a、.box .b等不止一次使用，或者我只使用ids，而类.a、.b等被用来给相应的.box和.legend div提供相同的背景颜色。

我觉得一定有一种更简单的方法来做这件事，而不是经常重复。对此有任何帮助将不胜感激，谢谢。

jquery

javascript

回答 11

Stack Overflow用户

回答已采纳

发布于 2014-02-10 01:37:42

对选择器使用图例类。

$('.legend').on('mouseenter',function(){
    $('.box').not('.'+this.className.replace("legend","").trim()).css({'opacity':'0.4'});
});
$(".legend").on("mouseleave", function() {
    $(".box").css({"opacity": "1.0"});
});

演示

票数 2

Stack Overflow用户

发布于 2014-02-10 01:42:11

我会使用数据属性来保持它的干净，并允许正确地使用类进行格式化：

<div id="legend">
<div class="legend" data-target="a">a</div>
<div class="legend" data-target="b">b</div>
<div class="legend" data-target="c">c</div>
</div>
<div id="box">
<div class="box a">a</div>
<div class="box b">b</div>
<div class="box c">c</div>
</div>

$('#legend').on('mouseenter','.legend', function(){
     $('.box').not('.'+$(this).data('target')).css({"opacity": "0.4"});
}).on('mouseleave','.legend', function(){
     $('.box').css({"opacity": "1.0"});
});

游行示威

如果a、b和c只用于标识框，那么使用id而不是类甚至更干净。

使用id的演示和代码

对于一种完全不同的解决方案，您可以通过完全删除JS来彻底简化JS(不过，它确实限制了HTML )：

HTML：

<div class="legend a">a</div>
<div class="legend b">b</div>
<div class="legend c">c</div>

<div class="box" id=a>a</div>
<div class="box" id=b>b</div>
<div class="box" id=c>c</div>

CSS：

.legend:hover ~ .box { opacity:0.4 }
.legend.a:hover ~ #a { opacity:1 }
.legend.b:hover ~ #b { opacity:1 }
.legend.c:hover ~ #c { opacity:1 }

游行示威

票数 2

Stack Overflow用户

发布于 2014-02-10 01:47:48

你也可以用这个。

$('.a, .b, .c').on('mouseenter',function(){
    $('.box').not('.'+$(this).text()).css({'opacity':'0.4'});
});
$(".legend").on("mouseleave", function() {
    $(".box").css({"opacity": "1.0"});
});