我正在尝试创建一个动态投资组合库,您可以通过单击类别隐藏显示项目。除了在单击类别时隐藏/显示的元素中添加类别之外,一切都有效。
我目前有:
$(document).ready(function() {
$('ul.filter a').click(function() {
$(this).css('outline','none');
$('ul.filter .current').removeClass('current');
$(this).parent().addClass('current');
var filterVal = $(this).text().toLowerCase().replace(' ','-');
if(filterVal == 'all') {
$('div.portfolio .hidden').fadeIn('slow').removeClass('hidden');
} else {
$('div.portfolio').each(function() {
if(!$(this).hasClass(filterVal)) {
$(this).fadeOut('normal').addClass('hidden');
} else {
$(this).fadeIn('slow').removeClass('hidden').addClass("show");
$('.portfolio:visible').each(function (i) {
if (i % 2 == 0) $(this).addClass("last"); // This is the part that doesn't seem to work
});
}
});
}
return false;
});
});
这部分代码似乎有问题:
$('.portfolio:visible').each(function (i) {
if (i % 2 == 0) $(this).addClass("last"); // This is the part that doesn't seem to work
});
基本上,我希望将类.last添加到我的投资组合列表中的每一秒“可见”项目。
任何?
CSS
/* -------------- Portfolio List ---------------- */
#portfolio-items {
font-size: 11px;
}
#portfolio-items ul, #portfolio-items li {
list-style:none;
}
#portfolio-items .portfolio {
float:left;
width:265px;
height:145px;
margin:0px 60px 50px 0px;
display:block;
}
#portfolio-items .portfolio .portfolio-client {
float:left;
font-size: 11px;
color: #666;
text-decoration: none;
}
#portfolio-items .portfolio.last {
margin-right:0px;
}
#portfolio-items .portfolio img {
border:solid 6px #fff;
-moz-box-shadow: 1px 1px 3px #999; /* Firefox */
-webkit-box-shadow: 1px 1px 3px #999; /* Safari, Chrome */
box-shadow: 1px 1px 3px #999; /* CSS3 */
margin: 0px 0px 5px;
transition: all .3s; /* in Safari, every animatable property triggers an animation in .2s */
-o-transition: all .3s; /* in Safari, every animatable property triggers an animation in .2s */
-webkit-transition: all .3s; /* in Safari, every animatable property triggers an animation in .2s */
-moz-transition: all .3s; /* in Safari, every animatable property triggers an animation in .2s */
transform-origin: centre; /* in Safari, the origin for transformation */
-o-transform-origin: centre; /* in Firefox, the origin for transformation */
-webkit-transform-origin: centre; /* in Safari, the origin for transformation */
-moz-transform-origin: centre; /* in Firefox, the origin for transformation */
}
#portfolio-items .portfolio img:hover {
-moz-box-shadow: 1px 1px 6px #999; /* Firefox */
-webkit-box-shadow: 1px 1px 6px #999; /* Safari, Chrome */
box-shadow: 1px 1px 6px #999; /* CSS3 */
transform: scale(1.05);
-o-transform: scale(1.05);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
box-shadow: 0px 0px 20px #ccc;
-o-box-shadow: 0px 0px 20px #ccc;
-webkit-box-shadow: 0px 0px 20px #ccc;
-moz-box-shadow: 0px 0px 20px #ccc;
}
.view-project {
background: url(/themes/cogo/default_site/images/view-project.png) no-repeat right center;
display: block;
float: right;
height: 14px;
width: 87px;
padding-right: 20px;
text-align: right;
}
HTML
<div id="portfolio-items">
<div class="portfolio first cms content-management e-commerce clothing kids shops toys">
<a href="http://ee.dev/portfolio/detail/be-my-bear">
<img src="/images/sized/themes/site_themes/cogo/images/uploads/bemybear-project-254x139.jpg" width="254" height="139" title="Be My Bear" />
</a>
<a href="http://ee.dev/clients/be-my-bear" class="portfolio-client">Be My Bear</a>
<a href="http://ee.dev/portfolio/detail/be-my-bear" class="view-project"><span>View Project</span></a></div>
<div class="portfolio last cms content-management business-services">
<a href="http://ee.dev/portfolio/detail/joloda">
<img src="/images/sized/themes/site_themes/cogo/images/uploads/joloda1-254x139.jpg" width="254" height="139" title="Joloda International Ltd" />
</a>
<a href="http://ee.dev/clients/joloda-international" class="portfolio-client">Joloda International</a>
<a href="http://ee.dev/portfolio/detail/joloda" class="view-project"><span>View Project</span></a></div>
<div class="portfolio first buddypress cms content-management wordpress business-services coaching events training">
<a href="http://ee.dev/portfolio/detail/nwwn">
<img src="/images/sized/themes/site_themes/cogo/images/uploads/nwwn-project-254x139.jpg" width="254" height="139" title="NWWN" />
</a>
<a href="http://ee.dev/clients/north-wales-womens-network" class="portfolio-client">North Wales Women’s Network</a>
<a href="http://ee.dev/portfolio/detail/nwwn" class="view-project"><span>View Project</span></a></div>
<div class="portfolio last e-commerce jewellery shops">
<a href="http://ee.dev/portfolio/detail/italian-world">
<img src="/images/sized/themes/site_themes/cogo/images/uploads/italianworld-254x139.jpg" width="254" height="139" title="Italian World" />
</a>
<a href="http://ee.dev/clients/italian-world" class="portfolio-client">Italian World</a>
<a href="http://ee.dev/portfolio/detail/italian-world" class="view-project"><span>View Project</span></a></div>
<div class="portfolio first cms content-management drupal designers printers">
<a href="http://ee.dev/portfolio/detail/mms-almac">
<img src="/images/sized/themes/site_themes/cogo/images/uploads/mms-project-254x139.jpg" width="254" height="139" title="MMS Almac" />
</a>
<a href="http://ee.dev/clients/mms-almac-ltd" class="portfolio-client">MMS Almac Ltd</a>
<a href="http://ee.dev/portfolio/detail/mms-almac" class="view-project"><span>View Project</span></a></div>
<div class="portfolio last cms content-management charity community training">
<a href="http://ee.dev/portfolio/detail/europe-direct">
<img src="/images/sized/themes/site_themes/cogo/images/uploads/europedirect-project-254x139.jpg" width="254" height="139" title="Europe Direct" />
</a>
<a href="http://ee.dev/clients/ectarc" class="portfolio-client">Ectarc</a>
<a href="http://ee.dev/portfolio/detail/europe-direct" class="view-project"><span>View Project</span></a></div>
</div>?
过滤菜单
<ul class="filter">
<li class="booking-systems"><a href="http://ee.dev/portfolio/category/booking-systems">Booking Systems</a></li>
<li class="buddypress"><a href="http://ee.dev/portfolio/category/buddypress">Buddypress</a></li>
<li class="cms"><a href="http://ee.dev/portfolio/category/cms">CMS</a></li>
<li class="content-management"><a href="http://ee.dev/portfolio/category/content-management">Content Management</a></li>
<li class="drupal"><a href="http://ee.dev/portfolio/category/drupal">Drupal</a></li>
<li class="e-commerce"><a href="http://ee.dev/portfolio/category/e-commerce">E-Commerce</a></li>
<li class="silverstripe"><a href="http://ee.dev/portfolio/category/silverstripe">Silverstripe</a></li>
<li class="wordpress"><a href="http://ee.dev/portfolio/category/wordpress">Wordpress</a></li>
</ul>
答案 0 :(得分:4)
你需要使用:odd selector:
http://api.jquery.com/odd-selector/
不完全确定如何在代码中实现它,但可能类似$('。portfolio:odd')或甚至$('。portfolio:visible:odd')。我会在一秒钟内尝试一下jsfiddle。
答案 1 :(得分:0)
$("tr:even").addClass("even");
$("tr:odd").addClass("odd");
会给出“斑马条纹”效果。
答案 2 :(得分:0)
那么只需稍作修改即可:
$("tr:visible:even").addClass("even");
$("tr:visible:odd").addClass("odd");
但每次隐藏/取消隐藏任何元素时都必须调用它。而且你也必须先删除这些类..这样的事情:
$("tr").removeClass("even").removeClass("odd");
$("tr:visible:even").addClass("even");
$("tr:visible:odd").addClass("odd");
我想你应该好!