jQuery - 我怎样才能简化这个？

Question

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

但是，不仅我有一个类，b和c，还有另外6个或7的其他类也是如此。类别.box .a，.box .b等被多次使用，或者我只是使用ID，并且.a,.b等类正被用于给予对应的.box和.legend div相同的背景颜色。

我觉得必须有一个简单的方法来做到这一点，而不是使用大量的重复。任何帮助，将不胜感激，谢谢。

Answer 1

使用类传奇的选择

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

DEMO

Answer 2

在这里，人们为你解决

var chars = ['a','b','c']; 
for (var i = 0; i < chars.length; i++) { 
    var ch = chars[i]; 
    $(".legend."+ch).on("mouseenter", function() { 
    $(".box").not("."+ch).css({"opacity": "0.4"}); 
    }); 
} 

Answer 3

，而不是重复它的3倍，你可以这样做：

$(".legend div").on("mouseenter", function() { //<- i assume your divs are structured like so 
    $(".box").not(".a").css({"opacity": "0.4"}); 
}); 

$(".legend").on("mouseleave", function() { 
$(".box").css({"opacity": "1.0"}); 

也可以使用。新增（）https://api.jquery.com/add/

$(".legend.a") 
    .add(".legend.b") 
    .add(".legend.c") 
    .on("mouseenter", function() { //<- i assume your divs are structured like so 
    $(".box").not(".a").css({"opacity": "0.4"}); 
}); 

$(".legend").on("mouseleave", function() { 
$(".box").css({"opacity": "1.0"}); 

Answer 4

如何把逻辑函数里面？

function setOpacity (selector,notElement,opacity) 
    { 
     $(selector).on("mouseenter", function() { 
     $(".box").not(notElement).css({"opacity": opacity}); 
     }); 
    } 

CAL像

setOpacity(".legend.a", ".a", "0.4"); 

Answer 5

我会使用数据属性来保持它的清洁和允许适当使用类的格式化：

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

Demonstration

如果a，b和c仅用于识别这些框，那么使用id就更加清洁代替一个班级。

Demonstration and code using id

---

对于一个完全不同的一种解决方案，可以大大由完全删除它（它虽然限制你的HTML）简化您的JS：

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 } 

Demonstration

Answer 6

尝试

<div id="legend"> 
    <div class="legend a" data-target=".a">a</div> 
    <div class="legend b" data-target=".b">b</div> 
    <div class="legend c" 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> 

然后

var $boxes = $('#box .box'); 
$(".legend").hover(function() { 
    $boxes.not($(this).data('target')).css({ 
     opacity: .4 
    }); 
}, function() { 
    $boxes.not($(this).data('target')).css({ 
     opacity: 1 
    }); 
}); 

演示：Fiddle，或者this

---

或者，如果项目的顺序在两个容器相同，则

var $boxes = $('#box .box'); 
$(".legend").hover(function (e) { 
    $boxes.not(':eq(' + $(this).index() + ')').css({ 
     opacity: e.type == 'mouseenter' ? .4 : 1 
    }); 
}); 

演示：

$(".legend").on({"mouseenter": opacityDown, "mouseleave": opacityUp}); 

function opacityDown() { 
    $(".box").not("."+ $(this).html()).css({"opacity": "0.4"}); 
} 
function opacityUp() { 
    $(".box").css({"opacity": "1.0"}); 
} 

Answer 7

对不同的事件分割功能t想要在mouseenter上淡出并添加类.fade。在鼠标离开删除所有.fade类：

$(".legend").on("mouseenter", function() { 
    // get the classname and remove whitespace 
    var box = this.className.replace('legend', '').replace(/^\s+|\s+$/g, ''); 
    // add .fade to our boxes 
    $('#box').find('.' + box).addClass('fade'); 
}).on("mouseleave", function() { 
    // remove .fade 
    $(".box").removeClass('fade'); 
}); 

你的类.fade只有：

.fade { 
    opacity: 0.4; 
} 

这样一来，就可以做进一步的CSS-调整，而不必乱用你的JavaScript。

FIDDLE

Answer 8

我会写这样的：：

$(function(){ 
    var legend = $('.legend'), 
     box = $('.box'), 
     inEvent: 'mouseenter', 
     outEvent: 'mouseleave', 
     activeCss: { 
      opacity: 0.4 
     }, 
     inactiveCss: { 
      opacity: 1 
     }; 

    legend.on(inEvent, function(){ 
     var selectedClass = '.' + $(this).prop('class').replace('legend', ''); 

     box.not(selectedClass).css(activeCss); 
    }).on(outEvent, function(){ 
     box.css(inactiveCss); 
    }); 
}); 

Answer 9

获取你不箱子的名称Fiddle

Answer 10

你可以试试这个代码：

$('#legend .legend').on('mouseenter',function(){ 
    var box = $(this).attr('class').split(' ').pop(); 
    $(".box").not("."+ box).css({"opacity": "0.4"}); 
}).on("mouseleave", function() { 
    $(".box").css({"opacity": "1.0"}); 
}); 

Fiddle Demo

Answer 11

你也能使用这个。

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