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等不止一次使用，或者我只使用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

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

<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

对于完全不同类型的解决方案，您可以通过完全删除它来大幅简化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 }

Demonstration

Answer 3

您也可以使用它。

$('.a, .b, .c').on('mouseenter',function(){
    $('.box').not('.'+$(this).text()).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

而不是重复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"});

Answer 6

如何将逻辑放入函数中？

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

像它一样

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

Answer 7

尝试

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

演示：Fiddle

Answer 8

不同事件的分割功能：

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

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

Answer 9

我会这样写：

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

获取您不想淡入鼠标中心并添加课程.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。

FIDDLE

Answer 11

您可以尝试以下代码：

$('#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

jQuery - 我该如何简化这个？

11 个答案: