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

или вы можете использовать .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 4

Как о вводе логики внутри функции?

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

кал его как

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 используются только для идентификации ящиков, тогда было бы еще чище использовать идентификатор в вместо класса.

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

Демо: Fiddle

Answer 7

Сплит функция для различных события:

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

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

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

Получить имя окна вы не» t хотите пометить на mouseenter и добавить класс .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 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"}); 
});