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个变量中的哪一个，并适当地应用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.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：而不是选择器。这是一个简单的示例，您可以复制并粘贴到文件中并在浏览器中运行以查看其工作原理：

    <!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在你的情况下有一个方便的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');
    });

用数组和循环简化一些jquery

3 个答案: