[英]Toggle class between list elements on click of a button
I need to remove and add a class between elements of a list, if I hit the #swapThumb
button it should remove the selected
class from the current element and then added to the next element.我需要在列表的元素之间删除并添加一个 class,如果我点击#swapThumb
按钮,它应该从当前元素中删除selected
的 class,然后添加到下一个元素。
Here's what I have这就是我所拥有的
html 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 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');
});
}
});
First I'm checking if the li
element has an empty style
attribute (this is needed), if so, trigger the click validation.首先,我正在检查li
元素是否具有空style
属性(这是必需的),如果是,则触发点击验证。
The click should remove the selected
class from the first element and then added to the next one and so on (it should match the empty style
attribute).单击应从第一个元素中删除selected
的 class,然后添加到下一个元素,依此类推(它应该与空style
属性匹配)。 Once the selected
class hits the last element of the list
it should return the class to the first element.一旦selected
的 class 命中list
的最后一个元素,它应该将 class 返回到第一个元素。
This code snippet will change the class of the element beneath it to selected and remove it from the current one, while keeping all the other classes.此代码片段会将其下方元素的 class 更改为选中并将其从当前元素中删除,同时保留所有其他类。 It will also loop back to the beginning element if next
is clicked when on the last element.如果在最后一个元素上单击next
,它也会循环回到开始元素。 I've heard jQuery functions are more expensive that document functions and shouldn't be used for these kinds of things.我听说 jQuery 函数比文档函数更昂贵,不应该用于这类事情。 Apply this to your problem and you should get the expected result将此应用于您的问题,您应该得到预期的结果
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.