javascript - 如何在第一个和最后一个列表项处停止我的切换功能？

Question

我有一个滚动的无序列表。所选/中间列表项需要以黄色字体颜色显示。我已将类切换功能应用到我的滚动按钮。我只需要帮助找出一个解决方案，在我到达第一个和最后一个列表项时停止类切换功能。

我需要的解决方案必须允许添加和删除列表项，而无需尽可能调整 JavaScript。

像往常一样，我知道这对你们来说是轻松的工作。非常感谢任何帮助。

HTML

<div id="container">
  <div class="box">
    <ul id="ulscroller">
      <li value="22">&nbsp;</li>
      <li id="1" class="active">1</li>
      <li id="2" class="target">2</li>
      <li id="3" class="active">3</li>
      <li id="4" class="target">4</li>
      <li id="5" class="active">5</li>
      <li value="21" class="lastitem">&nbsp;</li>
    </ul>
  </div>
  <!--Button Controls-->
  <div class="buttholder">
    <a href="#">
      <button class="scrollup">UP</button>
    </a>

    <a href="#">
      <button class="buttok">OK</button>
    </a>

    <a href="#">
      <button class="scroll">Down</button>
    </a>
  </div>

CSS

.box li.target {
  color: #fff;
}

.box li.active {
  color: #fada15;
}

#container {
  position: relative;
  width: 310px;
  height: 268px;
  background: #000;
}

button {
  width: 72px;
  height: 72px;
  margin-top: 5px;
  margin-bottom: 5px
}

#container div {
  position: absolute;
}

ul li {
  font-size: 42px;
  color: #fff;
  overflow: hidden;
  font-family: arial;
  text-align: center;
}

li {
  list-style-type: none;
  margin-bottom: 30px;
  margin-top: 32px;
}

.box {
  border: 0px #00f solid;
  height: 247px;
  width: 199px;
  overflow: hidden;
}

#container div.buttholder {
  position: relative;
  float: right;
  border: 0px #0f0 solid;
  width: 72px;
  height: 236px;
  top: 11px;
  right: 13px;
}

.lastitem {height: 22px;}

JavaScript

$(document).ready(function() {
  $('.scroll').click(function() {
    $('li').toggleClass('active', 'target');
    $('.box').animate({
      scrollTop: '+=80'
    }, 100);
  });
});
$(document).ready(function() {
  $('.scrollup').click(function() {
    $('li').toggleClass('active', 'target');
    $('.box').animate({
      scrollTop: '-=80'
    }, 100);
  });
});

Answer 1

当 toggleClass() 有两个参数，第二个参数应该是一个 bool 值(而不仅仅是 truthy/falsy)。

因此，'target' 在此代码中被忽略:

 $('li').toggleClass('active', 'target');

您可以将第一个 li 设置为“active”，然后根据按下的按钮将事件类移动到上一个或下一个 li。

如果下一个li是最后一个 child ，或者前一个li是第一个 child ，那么不要移动事件类。

片段

$(document).ready(function() {
  $('.scroll').click(function() {
    var current= $('li.active'),
        next= current.next().not(':last-child');
    
    if(next.length) {
      next.addClass('active');
      current.removeClass('active');
    }
    $('.box').animate({
      scrollTop: '+=80'
    }, 100);
  });

  $('.scrollup').click(function() {
    var current= $('li.active'),
        prev= current.prev().not(':first-child');
    
    if(prev.length) {
      prev.addClass('active');
      current.removeClass('active');
    }
    $('.box').animate({
      scrollTop: '-=80'
    }, 100);
  });
});

.box li.target {
  color: #fff;
}
.box li.active {
  color: #fada15;
}
#container {
  position: relative;
  width: 310px;
  height: 268px;
  background: #000;
}
button {
  width: 72px;
  height: 72px;
  margin-top: 5px;
  margin-bottom: 5px
}
#container div {
  position: absolute;
}
ul li {
  font-size: 42px;
  color: #fff;
  overflow: hidden;
  font-family: arial;
  text-align: center;
}
li {
  list-style-type: none;
  margin-bottom: 30px;
  margin-top: 32px;
}
.box {
  border: 0px #00f solid;
  height: 247px;
  width: 199px;
  overflow: hidden;
}
#container div.buttholder {
  position: relative;
  float: right;
  border: 0px #0f0 solid;
  width: 72px;
  height: 236px;
  top: 11px;
  right: 13px;
}
.lastitem {
  height: 22px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="box">

    <ul id="ulscroller">
      <li value="22">&nbsp;</li>
      <li id="1" class="active">1</li>
      <li id="2">2</li>
      <li id="3">3</li>
      <li id="4">4</li>
      <li id="5">5</li>
      <li value="21" class="lastitem">&nbsp;</li>
    </ul>
  </div>
  <!--Button Controls-->
  <div class="buttholder">
    <a href="#">
      <button class="scrollup">UP</button>
    </a>

    <a href="#">
      <button class="buttok">OK</button>
    </a>

    <a href="#">
      <button class="scroll">Down</button>
    </a>
  </div>