有两种解决方案：

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

因此，此代码中会忽略'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())

我选择所有＆＃34; li＆＃34;元素，然后删除第一个和最后一个。

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

解决方案＃2：

你也可以使用切片功能，就像在数组中一样：

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

这将删除＆＃39; li＆＃39;中的第一个和最后一个项目。元素数组。

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($)中。页面操作仅在页面加载后才开始。因此，无论页面是否已加载，您都不需要检查两次。

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

3 个答案:

有两种解决方案：

解决方案＃1

解决方案＃2：