使用数组和循环简化一些jquery
Simplifying some jquery with array and loop
我有以下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.同位素项目选择器会根据forEach函数循环通过数组的哪个部分而变化。有没有办法判断当前正在使用哪个变量?我无法用编程术语解释我的意思,但用简单的英语:
if current variable being processed = "the variable", then don't toggle classes
else
toggleClass...
然后我可以将该检查添加到每个 toggleClass 部分,我认为它会起作用。我仍然是jQuery/javascript的新手,不知道如何继续,希望我已经解释得足够好了。
任何帮助将不胜感激。
PS:我不能使用纯CSS悬停,因为元素不是嵌套的。 我不确定.hover/.mouseIsOver有什么优点或缺点
看起来你想要实现的是,当你将鼠标悬停在一个项目上时,所有其他项目(减去你当前悬停的项目(都会获得某种类型的样式。这里的关键是选择要从中添加或删除类的项目时的 not 选择器。
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>
听起来你可以使用 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>
希望这有帮助。
为了跟进我的评论,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:循环一个具有不同超时值的循环
- jQuery循环在特定位置暂停
- 循环中的jQuery循环
- 使用val()在jquery循环中设置html字符串的val
- $.每个jquery循环打印一个“;未定义的“;对于getJSON请求后的每个元素,网格数据都会完美地打印出来
- jQuery循环寻呼机附加较小的图像大小
- 如何优化这个jquery循环的执行时间
- Jquery循环停止按钮
- 如何使用jQuery循环变量名
- Jquery循环洗涤器插件:添加到图像的链接
- 遍历 jQuery:循环遍历子项
- Javascript / JQuery循环访问已发布的ajax数据字符串以为其分配新值
- Jquery 循环一次或在数据数组中显示一次数据
- Jquery 循环与名称 increament.
- jQuery 循环 JSON 结果,对象作为值
- 正在尝试将jquery鼠标滚轮插件插入到jquery循环2中
- jQuery循环遍历每个li并检查一个类
- 使用jQuery循环遍历颜色数组
- 使用jquery循环表行并通过类名访问数据
- 对未知数量的元素执行Jquery循环