我正在尝试使用 jQuery 做一些简单的事情,但遇到了困难。我想做以下事情
遍历每个 li 元素并检查它是否应用了特定类“timeline-inverted”
如果我正在寻找的类存在于 li 上,那么我想应用一些进一步的类“visible animated fadeInRight”
如果该类不存在,那么我想应用一个替代类“visible animated fadeInLeft”
这是我目前所拥有的...
HTML 输出
<ul class="timeline">
<li class="hidden">
<div class="timeline-image">
<img class="img-circle img-responsive" src="assets/img/about/1.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>2009-2010</h4>
<h4 class="subheading">Our Humble Beginnings</h4>
</div>
<div class="timeline-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
</div>
</div>
</li><!-- /timeline item -->
<li class="timeline-inverted hidden">
<div class="timeline-image">
<img class="img-circle img-responsive" src="assets/img/about/1.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>March 2011</h4>
<h4 class="subheading">An Agency is Born</h4>
</div>
<div class="timeline-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
</div>
</div>
</li><!-- /timeline item -->
<li class="hidden">
<div class="timeline-image">
<img class="img-circle img-responsive" src="assets/img/about/1.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>July 2014</h4>
<h4 class="subheading">Phase Two Expansion</h4>
</div>
<div class="timeline-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
</div>
</div>
</li><!-- /timeline item -->
<li class="timeline-inverted hidden">
<div class="timeline-image">
<img class="img-circle img-responsive" src="assets/img/about/1.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>December 2014</h4>
<h4 class="subheading">Another great month</h4>
</div>
<div class="timeline-body">
<p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</li><!-- /timeline item -->
<li class="timeline-inverted">
<div class="timeline-image">
<h4>
Be Part
<br>Of Our
<br>Story!
</h4>
</div>
</li><!-- /.timeline -->
</ul>
查询
$('.timeline li').each(function () {
if ($(this).hasClass("timeline-inverted")) {
$('.timeline li').removeClass("hidden").viewportChecker({
classToAdd: 'visible animated fadeInRight', offset: 100
});
} else {
$(this).removeClass("hidden").viewportChecker({
classToAdd: 'visible animated fadeInLeft', offset: 100
});
}
});
如果 li 元素有时间轴倒置类,我希望它从右侧飞入,如果它没有时间轴倒置类,我希望它从左侧飞入!
谢谢保罗
*编辑 - 此代码对我有用:)
$(function () {
$('.timeline li').each(function () {
if ($(this).hasClass("timeline-inverted")) {
$(this).removeClass("hidden").viewportChecker({
classToAdd:'visible animated fadeInRight', offset: 100
});
} else {
$(this).removeClass("hidden").viewportChecker({
classToAdd: 'visible animated fadeInLeft', offset: 100
});
}
});
});
最佳答案
您不需要使用 each()
。你可以像下面那样做。
$('.timeline li.timeline-inverted').removeClass("hidden").viewportChecker({
classToAdd: 'visible animated fadeInRight',
offset: 100
});
$('.timeline li').not('.timeline-inverted').removeClass("hidden").viewportChecker({
classToAdd: 'visible animated fadeInLeft',
offset: 100
});
关于javascript - jQuery循环遍历每个li并检查一个类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36742023/