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