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>

但是，我不仅有a、b、c 类，还有另外6 或7 个其他类。类

.box .a

、

.box .b

等被多次使用，或者我只使用 ids，类

.a

、

.b

等被用来给出相应的

.box

和

 .legend

划分相同的背景颜色。

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

Answer 1

你也可以用这个。

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

Answer 2

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

<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（尽管它确实限制了您的 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 }

示范

Answer 3

使用选择器的图例类

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

演示

Answer 4

这里为您提供一个解决方案

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 5

将逻辑放入函数中怎么样？

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

像这样

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

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

演示：小提琴

Answer 7

获取您不想在鼠标输入时淡出的框的名称并添加一个类

.fade

。在 mouseleave 上删除所有

.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。

小提琴

Answer 8

您可以尝试以下代码：

$('#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"});
});

小提琴演示

Answer 9

针对不同事件的拆分功能：

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

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

Answer 10

我会这样写：

$(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 11

您可以这样做，而不是重复 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"});

或者你可以使用

.add()

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