Упрощение некоторых JQuery с массивом и циклом

Question

У меня есть следующий код JQuery, который на данный момент работает отлично:

$("#post-27") // select your element 
.hover(function(){ // trigger the mouseover event
    $("#post-102.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-81.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-95.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-99.isotope-item").toggleClass('dim-portfolio-item');
}, function(){ // trigger the mouseout event
    $("#post-102.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-81.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-95.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-99.isotope-item").toggleClass('dim-portfolio-item');
});

$("#post-102") // select your element 
.hover(function(){ // trigger the mouseover event
    $("#post-27.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-81.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-95.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-99.isotope-item").toggleClass('dim-portfolio-item');
}, function(){ // trigger the mouseout event
    $("#post-27.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-81.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-95.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-99.isotope-item").toggleClass('dim-portfolio-item');
});

$("#post-81") // select your element 
.hover(function(){ // trigger the mouseover event
    $("#post-27.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-102.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-95.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-99.isotope-item").toggleClass('dim-portfolio-item');
}, function(){ // trigger the mouseout event
    $("#post-27.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-102.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-95.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-99.isotope-item").toggleClass('dim-portfolio-item');
});

$("#post-95") // select your element 
.hover(function(){ // trigger the mouseover event
    $("#post-27.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-102.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-81.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-99.isotope-item").toggleClass('dim-portfolio-item');
}, function(){ // trigger the mouseout event
    $("#post-27.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-102.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-81.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-99.isotope-item").toggleClass('dim-portfolio-item');
});

$("#post-99") // select your element 
.hover(function(){ // trigger the mouseover event
    $("#post-27.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-102.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-81.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-95.isotope-item").toggleClass('dim-portfolio-item');
}, function(){ // trigger the mouseout event
    $("#post-27.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-102.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-81.isotope-item").toggleClass('dim-portfolio-item');
    $("#post-95.isotope-item").toggleClass('dim-portfolio-item');
});

Ранее я просил помочь сделать код jQuery более эффективным и смог использовать массив с помощью других здесь. Тем не менее, один массив здесь не сработает, я думаю, что мне нужно использовать какой-то цикл, который может определить, какая из 5 переменных включена, и соответствующим образом применить событие класса переключения.

Например, я мог бы сделать что-то с массивом вроде:

var $ids = ["#post-27", "#post-102", "#post-81", "#post-95", "#post-99"],

$ids.forEach(function(v) {
    if($(v).mouseIsOver()) {
        $("#post-102.isotope-item").toggleClass('dim-portfolio-item');
        $("#post-81.isotope-item").toggleClass('dim-portfolio-item');
        $("#post-95.isotope-item").toggleClass('dim-portfolio-item');
        $("#post-99.isotope-item").toggleClass('dim-portfolio-item');
    } else {
        $("#post-102.isotope-item").toggleClass('dim-portfolio-item');
        $("#post-81.isotope-item").toggleClass('dim-portfolio-item');
        $("#post-95.isotope-item").toggleClass('dim-portfolio-item');
        $("#post-99.isotope-item").toggleClass('dim-portfolio-item');
    }
});

Проблема в том, что селекторы #post-X.isotope-item меняются в зависимости от того, через какую часть массива проходит функция forEach. Есть ли способ сказать, какая переменная в настоящее время используется? Я не могу объяснить, что я имею в виду в терминах программирования, но простым языком:

if current variable being processed = "the variable", then don't toggle classes
else
toggleClass...

Тогда я мог бы добавить эту проверку к каждой из частей toggleClass, и я думаю, что это сработало бы. Я все еще новичок в jQuery/javascript и не знаю, как поступить, надеюсь, я объяснил это достаточно хорошо.

Любая помощь будет принята с благодарностью.

PS: я не могу использовать чистый CSS наведения, потому что элементы не являются вложенными. Я не уверен, есть ли какие-либо преимущества или недостатки.hover / .mouseIsOver

Answer 1

Похоже, что вы хотите достичь, когда вы наводите курсор на элемент, все остальные элементы (за исключением того, над которым вы в данный момент зависали) приобретают какой-то стиль. Ключевым моментом здесь является не селектор при выборе элементов для добавления или удаления классов.

http://jsfiddle.net/AWWLL/

<style>
.item {
    width: 100px;
    height: 100px;
    background-color: #000;
    margin: 0;
    list-style: none;
    cursor: pointer;
}

.dim {
    -webkit-opacity: 0.5;
    -moz-opacity: 0.5;
    filter:alpha(opacity=50);
    opacity: 0.5;
}
</style>

<script>
$(function() {
    $('.item').hover(function() {
        $('.item').not(this).addClass('dim');
    }, function() {
        $('.item').not(this).removeClass('dim');
    }); 
});
</script>

<ul>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
</ul>

Answer 2

Чтобы прокомментировать мой комментарий, в вашем случае jQuery имеет удобный метод siblings():

$(".isotope-item")
    .hover(function(){ // trigger the mouseover event
        $(this).siblings().toggleClass('dim-portfolio-item');
    }, function(){ // trigger the mouseout event
        $(this).siblings().toggleClass('dim-portfolio-item');
    });

Answer 3

Похоже, вы могли бы использовать jquery: не селектор. Вот простой пример, который вы можете скопировать и вставить в файл и запустить в браузере, чтобы увидеть, как он работает:

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>not demo</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>

<div class="adult">
  <span>Homer</span>
</div>
<div>
  <span>Bart</span>
</div>
<div class="adult">
  <span>Marge</span>
</div>
<div>
  <span>Lisa</span>
</div>
<div>
  <span>Maggie</span>
</div>

<script>
    $( "div:not('.adult')" ).css( "background-color", "yellow" );
</script>

</body>
</html>

Надеюсь это поможет.