![](/img/trans.png)
[英]When looping through an array how do I add/remove classes from elements that fit a specific criteria?
[英]Looping through unordered list to add and remove classes
我正在嘗試遍歷無序列表,並遍歷每個列表項(帶有ticker-item類),並臨時向其添加一個類,以便CSS可以對其進行一些轉換。
var a = [];
$(".ticker-item").each(function(index) {
a[index] = $(this);
setTimeout(function() {
a[index].addClass('current').delay(500).queue(function(next) {
a[index].removeClass('current');
next();
});
}, index * 500);
});
我搜索了各種SO文章,並且我相信該函數將正確添加和刪除類,但是當前似乎不使用li的嗎?
這是HTML:
<div class="ticker">
<ul class="ticker-items">
<li class="ticker-item">
<a href="/categories/featured/summer-sale/1185">
<p><strong>Summer Sale</strong>🍦 Now more things at <strong>50% off!</strong></p>
</a>
</li>
<li class="ticker-item">
<a href="/about">
<p>Things for kids you'll 💗 too. <strong>Our story</strong></p>
</a>
</li>
<li class="ticker-item">
<a href="/help/delivery-and-returns">
<p><strong>Free</strong> Delivery* & <strong>Free</strong> Returns 📦</p>
</a>
</li>
</ul>
</div>
您不使用類ticker-item
遍歷元素,而是遍歷如下元素: <ticker-item> ... </ticker-item>
要更改循環,您必須使用類選擇器:
$(".ticker-item").each
您沒有按班級名稱訪問,
將$(“ ticker-item”)。each更改為$(“。ticker-item”)。each(類選擇器)
根據定義, addClass
和removeClass
都在使用隊列。 因此jQuery#delay
將對這些方法無效。
解決方案是將它們都執行到排隊的回調中,以便將它們推入隊列,如下所示:
setTimeout(() => { $('#noqueue') .addClass('colored') .delay(2000) .removeClass('colored'); $('#queue') .queue(function(next) { $(this).addClass('colored'); next(); }) .delay(2000) .queue(function() { $(this).removeClass('colored'); }); }, 1000);
div { transition: color .5s; } .colored { color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="noqueue">no queue</div> <div id="queue">with queue</div>
我在下面舉了一個鏈接動畫的示例。
請注意,我沒有使用setTimeout
而是只使用jQuery#delay
,因為我發現它更干凈。
另外,如果要在不刷新頁面的情況下重新執行動畫,請不要忘記使動畫出隊。
$('button').on('click', () => { $('ul > li').each((i, li) => { $(li) .delay(500 * (i + 1)) .queue(next => { $(li).addClass('colored'); next(); }) .delay(750) .queue(() => ($(li).removeClass('colored'), $(li).dequeue())); }); });
ul > li { transition: color 1s; } .colored { color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ul> <button>Color them!</button>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.