我有以下 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 是否有任何优点或缺点
最佳答案
看起来您想要实现的是,当您将鼠标悬停在某个项目上时,所有其他项目(减去您当前悬停的项目)都会获得某种类型的样式。这里的关键是选择要添加或删除类的项目时的 not 选择器。
<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>
关于javascript - 用数组和循环简化一些jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19254413/