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

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() 有两个参数时，第二个参数应为布尔值（而不仅仅是真/假）。

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

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

您可以将第一个li 设置为“活动”，然后将活动类移动到上一个或下一个li，具体取决于按下的按钮。

如果下一个li 是最后一个孩子，或者前一个li 是第一个孩子，则不要移动活动类。

片段

$(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>

Answer 2

有两种解决方案：

解决方案 #1

您可以使用 jQuery 的 .first 和 .last 函数：

$('li').not($('li').first()).not($('li').last())

我正在选择所有“li”元素，然后删除第一个和最后一个。

https://api.jquery.com/last/

---

解决方案 #2：

你也可以使用切片函数，比如在数组中：

$('li').slice(1,-1)

这将删除 'li' 元素数组中的第一项和最后一项。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

Answer 3

Rick Hitchcock 的答案是完美的，但我想补充一点。 对于您调用的每个 jQuery 函数，您不需要将其封装在 $(document).ready(function() 或 jQuery(document).ready(function($) 中。页面操作仅在页面加载后开始。这样你就不需要再检查两次页面是否加载了。