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

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

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

беда в том, что # после X.isotope-пункт селекторы изменяются в зависимости от того, какая часть массива функция 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: not selector. Вот простой пример, который вы можете скопировать и вставить в файл и запустить в браузере, чтобы увидеть, как это работает:

<!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> 

Надеется, что это помогает.

Answer 3

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

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