Javascript 使用数组和循环简化某些jquery

我有以下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个变量中的哪一个，并适当地应用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');
    }
});

问题在于#post-X.item选择器的变化取决于forEach函数循环通过的数组的哪个部分。有没有一种方法可以判断当前正在使用哪个变量？我无法用编程术语解释我的意思，但用简单的英语：

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

然后我可以将该检查添加到每个toggleClass部件中，我认为它会起作用。我还是jQuery/javascript新手，不知道如何继续，希望我已经解释得足够好了

任何帮助都将不胜感激

PS：我不能使用纯CSS hover，因为元素没有嵌套。

---

我不确定.hover/.mouseishover有什么优点或缺点。听起来你可以使用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>

不演示
荷马
巴特
玛吉
丽莎
麦琪
$（“div:not（“.成人”））.css（“背景色”、“黄色”）；

---

希望这能有所帮助。

听起来您可以使用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>

不演示
荷马
巴特
玛吉
丽莎
麦琪
$（“div:not（“.成人”））.css（“背景色”、“黄色”）；

---

希望这能有所帮助。

看起来您想要实现的是，当您将鼠标悬停在某个项目上时，所有其他项目（减去您当前悬停的项目）都会获得某种类型的样式。这里的关键是选择要添加或删除类的项时的not选择器

.项目{
宽度：100px；
高度：100px；
背景色：#000；
保证金：0；
列表样式：无；
光标：指针；
}
.昏暗{
-webkit不透明度：0.5；
-moz不透明度：0.5；
过滤器：α（不透明度=50）；
不透明度：0.5；
}
$（函数（）{
$（'.item'）。悬停（函数（）{
$（'.item'）.not（this.addClass（'dim'）；
}，函数（）{
$（'.item'）.not（this.removeClass（'dim'）；
}); 
});

看起来您想要实现的是，当您将鼠标悬停在某个项目上时，所有其他项目（减去您当前悬停的项目）都会获得某种类型的样式。这里的关键是选择要添加或删除类的项时的not选择器

.项目{
宽度：100px；
高度：100px；
背景色：#000；
保证金：0；
列表样式：无；
光标：指针；
}
.昏暗{
-webkit不透明度：0.5；
-moz不透明度：0.5；
过滤器：α（不透明度=50）；
不透明度：0.5；
}
$（函数（）{
$（'.item'）。悬停（函数（）{
$（'.item'）.not（this.addClass（'dim'）；
}，函数（）{
$（'.item'）.not（this.removeClass（'dim'）；
}); 
});

为了跟进我的评论，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');
    });

---

为了跟进我的评论，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');
    });

---

你的#post-X elements是兄弟姐妹吗？我考虑过这一点，但即使他们是兄弟姐妹，如果我悬停在最后一个兄弟姐妹上，我仍然必须返回DOM，以促使与前4个相邻兄弟姐妹的更改。。。我认为CSS不可能做到这一点。关键是jQuery可以为您做到这一点，请参阅我的答案。您的#post-X元素是兄弟姐妹吗？我考虑过这一点，但即使它们是兄弟姐妹，如果我悬停在最后一个兄弟姐妹上，我仍然必须返回DOM，以便与之前的4个相邻兄弟姐妹进行更改。。。我认为CSS不可能做到这一点。关键是jQuery可以为您做到这一点，参见我的答案。谢谢，我选择Jonathon的答案是因为他是第一位的。谢谢，我选择Jonathon的答案是因为他是第一位的。谢谢，这也很高兴知道。谢谢，这也很高兴知道。