[英]Toggle class between list elements on click of a button
我需要在列表的元素之間刪除並添加一個 class,如果我點擊#swapThumb
按鈕,它應該從當前元素中刪除selected
的 class,然后添加到下一個元素。
這就是我所擁有的
html
<ul id="product-thumbnails" class="thumbnails list-inline">
<li class="vtmb vt-123 selected" style="">
<a href="/uno"><img src="https://via.placeholder.com/100x100"></a>
</li>
<li class="vtmb vt-456" style="">
<a href="/dos"><img src="https://via.placeholder.com/100x100"></a>
</li>
<li class="vtmb vt-789" style="display: none">
<a href="/tres"><img src="https://via.placeholder.com/100x100"></a>
</li>
<li class="vtmb vt-101" style="">
<a href="/cuatro"><img src="https://via.placeholder.com/100x100"></a>
</li>
<li class="vtmb vt-121" style="display: none">
<a href="/cinco"><img src="https://via.placeholder.com/100x100"></a>
</li>
</ul>
<button id="swapThumb">Next</button>
javascript
let thumbsNailsList = $('#product-thumbnails').find('li');
let swapButton = $('#swapThumb');
thumbsNailsList.each((index, item) => {
let thumbsAvailable = $(item).attr('style');
if (thumbsAvailable === '') {
$(swapButton).on('click', () => {
$(item).removeClass('selected');
$(item).closest($(item)).next().addClass('selected');
});
}
});
首先,我正在檢查li
元素是否具有空style
屬性(這是必需的),如果是,則觸發點擊驗證。
單擊應從第一個元素中刪除selected
的 class,然后添加到下一個元素,依此類推(它應該與空style
屬性匹配)。 一旦selected
的 class 命中list
的最后一個元素,它應該將 class 返回到第一個元素。
此代碼片段會將其下方元素的 class 更改為選中並將其從當前元素中刪除,同時保留所有其他類。 如果在最后一個元素上單擊next
,它也會循環回到開始元素。 我聽說 jQuery 函數比文檔函數更昂貴,不應該用於這類事情。 將此應用於您的問題,您應該得到預期的結果
let i = 0; let thumbsNailsList = document.getElementById("product-thumbnails").children; let btn = document.getElementById("btn"); btn.onclick = function() { var prevClasses = thumbsNailsList[i].className; thumbsNailsList[i].className = prevClasses.replace("selected", ""); i = (i+1) % thumbsNailsList.length; thumbsNailsList[i].className = "selected"; console.log(thumbsNailsList); }
<ul id="product-thumbnails"> <li class='selected'></li> <li class=''></li> <li class=''></li> <li class=''></li> </ul> <button id="btn">Next</button>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.