根据索引向元素添加 class

Question

目前我正在建立一个讲故事的网站，客户可以在其中循环浏览多个视频。但是，网站上还有一个包含章节的页面。因此，当客户点击下一个或上一个按钮时，这些章节应该在他当前所在的章节上变亮。

目前我建立了一个点击计数器，当他点击下一个时计数器正在递增，当他点击上一个时计数器正在递减。我有 11 章，所以有 11 个视频。我正在按索引检查章节。他们从 0 到 11。当客户点击下一个按钮时，他将转到下一个视频，点击计数器增加一个。

目前我无法将此点击计数器连接到章节的当前索引。因此，如果点击计数器变为 2，则只有第 2 章（索引 2）的背景应该变亮。

目前我有这个：

    <a href="#" class="vorige prev-rew button-sound">
         <svg>icon</svg>
    </a>
    <a href="#" class="next prev-rew button-sound">
        <svg> icon</svg>
    </a>
   
    <div class="marketing-chapter job-chapter">
        <a href="#">
            <div class="anchor-point chapter-1">
                <p>1</p>
            </div>
        </a>
        <a href="#">
            <div class="anchor-point chapter-2">
                <p>2</p>
            </div>
        </a>
        <a href="#">
            <div class="anchor-point chapter-3">
                <p>3</p>
            </div>
        </a>
        <a href="#">
            <div class="anchor-point chapter-4">
                <p>4</p>
            </div>
        </a>
        <a href="#">
            <div class="anchor-point chapter-5">
                <p>5</p>
            </div>
        </a>
        <a href="#">
            <div class="anchor-point chapter-6">
                <p>6</p>
            </div>
        </a>
        <a href="#">
            <div class="anchor-point chapter-7">
                <p>7</p>
            </div>
        </a>
        <a href="#">
            <div class="anchor-point chapter-8">
                <p>8</p>
            </div>
        </a>
        <a href="#">
            <div class="anchor-point chapter-9">
                <p>9</p>
            </div>
        </a>
        <a href="#">
            <div class="anchor-point chapter-10">
                <p>10</p>
            </div>
        </a>
        <a href="#">
            <div class="anchor-point chapter-11">
                <p>11</p>
            </div>
        </a>
    </div>

    // Anchorpoint loop
    var set = $(".anchor-point");
    var length = set.length;
    var ViewportCount = 1;


    $('.prev-rew').on("click", function() {

        if ($(this).hasClass('next')) {
            console.log('klikkert next');
            ViewportCount = ViewportCount + 1;
        } else if ($(this).hasClass('vorige')) {
            console.log('klikkert vorige');
            ViewportCount = ViewportCount - 1;
        }

        set.each(function(index) {
            index = ViewportCount;
            console.log(index);
            console.log(ViewportCount);

            if(index == ViewportCount){
                // Change the background-color of the number, connected to the index. So 
                current chapter will light up
            }
        });
    });

Answer 1

要执行您需要的操作，您可以使用 eq() 方法直接 select 集合中的元素，无需循环：

var set = $(".anchor-point");
var ViewportCount = 0;

$('.prev-rew').on("click", function() {
  if ($(this).hasClass('next')) {
    ViewportCount = ViewportCount + 1;
  } else if ($(this).hasClass('vorige')) {
    ViewportCount = ViewportCount - 1;
  }

  set.removeClass('active').eq(ViewportCount % set.length).addClass('active');
});

.active { background-color: #C00; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="vorige prev-rew button-sound">Previous</a>
<a href="#" class="next prev-rew button-sound">Next</a>

<div class="marketing-chapter job-chapter">
  <a href="#">
    <div class="anchor-point chapter-1 active"><p>1</p></div>
  </a>
  <a href="#">
    <div class="anchor-point chapter-2"><p>2</p></div>
  </a>
  <a href="#">
    <div class="anchor-point chapter-3"><p>3</p></div>
  </a>
  <a href="#">
    <div class="anchor-point chapter-4"><p>4</p></div>
  </a>
  <a href="#">
    <div class="anchor-point chapter-5"><p>5</p></div>
  </a>
  <a href="#">
    <div class="anchor-point chapter-6"><p>6</p></div>
  </a>
  <a href="#">
    <div class="anchor-point chapter-7"><p>7</p></div>
  </a>
  <a href="#">
    <div class="anchor-point chapter-8"><p>8</p></div>
  </a>
  <a href="#">
    <div class="anchor-point chapter-9"><p>9</p></div>
  </a>
  <a href="#">
    <div class="anchor-point chapter-10"><p>10</p></div>
  </a>
  <a href="#">
    <div class="anchor-point chapter-11"><p>11</p></div>
  </a>
</div>

但是，您可以避免使用计数器变量，而是根据 DOM 中的当前位置移动活动 class。包裹 div 的 <a> 元素也可以删除，因为它无效 HTML，它使 JS 更直接，在这种情况下也没有必要

$('.prev-rew').on("click", function() {
  let $current = $('.active');
  let $target = $current[$(this).data('action')]();

  if ($target.length) {
    $current.removeClass('active');
    $target.addClass('active');
  }
});

.active {
  background-color: #C00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="vorige prev-rew button-sound" data-action="prev">Previous</a>
<a href="#" class="next prev-rew button-sound" data-action="next">Next</a>

<div class="marketing-chapter job-chapter">
  <div class="anchor-point chapter-1 active"><p>1</p></div>
  <div class="anchor-point chapter-2"><p>2</p></div>
  <div class="anchor-point chapter-3"><p>3</p></div>
  <div class="anchor-point chapter-4"><p>4</p></div>
  <div class="anchor-point chapter-5"><p>5</p></div>
  <div class="anchor-point chapter-6"><p>6</p></div>
  <div class="anchor-point chapter-7"><p>7</p></div>
  <div class="anchor-point chapter-8"><p>8</p></div>
  <div class="anchor-point chapter-9"><p>9</p></div>
  <div class="anchor-point chapter-10"><p>10</p></div>
  <div class="anchor-point chapter-11"><p>11</p></div>
</div>

根据索引向元素添加 class

Add class to element based on its index

html

javascript

indexing

jquery