时间戳

首页 > 解决方案 > 单击按钮在列表元素之间切换类

javascript - 单击按钮在列表元素之间切换类

问题描述

我需要在列表的元素之间删除和添加一个类，如果我点击#swapThumb按钮，它应该selected从当前元素中删除该类，然后添加到下一个元素。

这就是我所拥有的

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从第一个元素中删除类，然后添加到下一个元素，依此类推（它应该匹配空style属性）。一旦selected类命中最后一个元素，list它应该将类返回到第一个元素。

标签： javascriptjquery

解决方案

此代码片段会将其下方元素的类更改为已选择并将其从当前类中删除，同时保留所有其他类。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>

推荐阅读