Question

我想将active类从一个元素设置为元素列表中的另一个元素。为了获得元素列表，我在下面的代码中使用了

$(document).on('click touchstart', 'button.previouslecture', function () {    
    var allchapters = $('div.chapter');
    console.log(allchapters);

    // todo: set previous lecture as active

});

$(document).on('click touchstart', 'button.nextlecture', function () {    
    var allchapters = $('div.chapter');
    console.log(allchapters);

    // todo: set next lecture as active

});

并且此代码在控制台上返回以下结果：

现在，我该如何编写jQuery代码以将active类移动到元素列表中的上一个或下一个元素。

更新

以下是示例HTML代码：

<ul class="list-unstyled">
    <li class="mb-2 section">
        <a href="#sectionopen_@item.Unit.Id" data-toggle="collapse" aria-expanded="false">
            Something
        </a>
        <ul class="list-group collapse" id="sectionopen_@item.Unit.Id">
            <li>
                <div class="chapter active">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
        </ul>
    </li>
    <li class="mb-2 section">
        <a href="#sectionopen_@item.Unit.Id" data-toggle="collapse" aria-expanded="false">
            Something
        </a>
        <ul class="list-group collapse" id="sectionopen_@item.Unit.Id">
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
        </ul>
    </li>
    <li class="mb-2 section">
        <a href="#sectionopen_@item.Unit.Id" data-toggle="collapse" aria-expanded="false">
            Something
        </a>
        <ul class="list-group collapse" id="sectionopen_@item.Unit.Id">
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
        </ul>
    </li>
    <li class="mb-2 section">
        <a href="#sectionopen_@item.Unit.Id" data-toggle="collapse" aria-expanded="false">
            Something
        </a>
        <ul class="list-group collapse" id="sectionopen_@item.Unit.Id">
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
        </ul>
    </li>
</ul>

Answer 1

将声明移到按钮之外
使用了计数器
为按钮提供相同的类并在ID上进行测试

$(function() {
  var $allChapters = $('div.chapter'),
    cnt = 0;
  $(document).on('click touchstart', 'button.lecture', function() {
    $allChapters.eq(cnt).removeClass("active");
    cnt += $(this).is("#previouslecture") ? -1 : 1;
    if (cnt<0) cnt=0; // or set to $allChapters.length-1 to wrap
    if (cnt>=$allChapters.length) cnt--; // or set to 0 to wrap
    $allChapters.eq(cnt).addClass("active");
  });
});

.active { border:1px solid black }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="previouslecture" class="lecture">Prev</button>
<button type="button" id="nextlecture"     class="lecture">Next</button>
<ul class="list-unstyled">
  <li class="mb-2 section" data-id="@item.Unit.Id">
    <a href="#sectionopen_@item.Unit.Id" data-toggle="collapse" aria-expanded="false">
            Something
        </a>
    <ul class="list-group collapse" id="sectionopen_@item.Unit.Id">
      <li>
        <div class="chapter active">
          <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
        </div>
      </li>
      <li>
        <div class="chapter">
          <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
        </div>
      </li>
      <li>
        <div class="chapter">
          <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
        </div>
      </li>
    </ul>
  </li>
  <li class="mb-2 section" data-id="@item.Unit.Id">
    <a href="#sectionopen_@item.Unit.Id" data-toggle="collapse" aria-expanded="false">
            Something
        </a>
    <ul class="list-group collapse" id="sectionopen_@item.Unit.Id">
      <li>
        <div class="chapter">
          <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
        </div>
      </li>
      <li>
        <div class="chapter">
          <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
        </div>
      </li>
      <li>
        <div class="chapter">
          <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
        </div>
      </li>
      <li>
        <div class="chapter">
          <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
        </div>
      </li>
    </ul>
  </li>
  <li class="mb-2 section" data-id="@item.Unit.Id">
    <a href="#sectionopen_@item.Unit.Id" data-toggle="collapse" aria-expanded="false">
            Something
        </a>
    <ul class="list-group collapse" id="sectionopen_@item.Unit.Id">
      <li>
        <div class="chapter">
          <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
        </div>
      </li>
      <li>
        <div class="chapter">
          <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
        </div>
      </li>
    </ul>
  </li>
  <li class="mb-2 section" data-id="@item.Unit.Id">
    <a href="#sectionopen_@item.Unit.Id" data-toggle="collapse" aria-expanded="false">
            Something
        </a>
    <ul class="list-group collapse" id="sectionopen_@item.Unit.Id">
      <li>
        <div class="chapter">
          <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
        </div>
      </li>
      <li>
        <div class="chapter">
          <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
        </div>
      </li>
      <li>
        <div class="chapter">
          <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
        </div>
      </li>
    </ul>
  </li>
</ul>

Answer 2

$(document).on('click touchstart', 'button.previouslecture', function () {    
    var all = $('div.chapter');
    var index = all.index(all.filter('.active'))
    if(index == 0)
    {
        alert('Already first');
                return;

    }
    
    var active = $('div.chapter.active');
    var next = all.eq(index-1);

    next.addClass('active')
    active.removeClass('active')

});

$(document).on('click touchstart', 'button.nextlecture', function () {    
    var all = $('div.chapter');
    var active = $('div.chapter.active');    
    var index = all.index(all.filter('.active'))
    if(index == all.length-1)
    {
        alert('Already last');
        return;
    }
    
    var active = $('div.chapter.active');
    var next = all.eq(index+1);
    
    next.addClass('active')
    active.removeClass('active')

});

.active{
background-color:gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-unstyled">
    <li class="mb-2 section" data-id="@item.Unit.Id">
        <a href="#sectionopen_@item.Unit.Id" data-toggle="collapse" aria-expanded="false">
            Something
        </a>
        <ul class="list-group collapse" id="sectionopen_@item.Unit.Id">
            <li>
                <div class="chapter ">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter active">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
        </ul>
    </li>
    <li class="mb-2 section" data-id="@item.Unit.Id">
        <a href="#sectionopen_@item.Unit.Id" data-toggle="collapse" aria-expanded="false">
            Something
        </a>
        <ul class="list-group collapse" id="sectionopen_@item.Unit.Id">
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
        </ul>
    </li>
    <li class="mb-2 section" data-id="@item.Unit.Id">
        <a href="#sectionopen_@item.Unit.Id" data-toggle="collapse" aria-expanded="false">
            Something
        </a>
        <ul class="list-group collapse" id="sectionopen_@item.Unit.Id">
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
        </ul>
    </li>
    <li class="mb-2 section" data-id="@item.Unit.Id">
        <a href="#sectionopen_@item.Unit.Id" data-toggle="collapse" aria-expanded="false">
            Something
        </a>
        <ul class="list-group collapse" id="sectionopen_@item.Unit.Id">
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
        </ul>
    </li>
</ul>
<button class="previouslecture">Previous</button>
<button class="nextlecture">Next</button>

将类从一个元素移动到另一个元素列表中

2 个答案: