0

我有以下 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 有什么优点或缺点

4

3 回答 3

2

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

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>
于 2013-10-08T18:24:20.443 回答
1

听起来您可以使用 jquery :not 选择器。这是一个简单的示例，您可以复制并粘贴到文件中并在浏览器中运行以查看其工作原理：

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

希望这可以帮助。

于 2013-10-08T18:13:24.090 回答
1

为了跟进我的评论，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');
    });
于 2013-10-08T19:16:45.963 回答