javascript - 当它们排在下一个时,如何不切换到第一个或最后一个 "li element"?

标签 javascript jquery html

我有一个分页栏,如果您单击“下一个”或“上一个”箭头按钮,它将切换到下一个按钮。

如果列表中的下一项是“.next”或“.prev”,我编写了一些代码以保留在当前“页”号上,但它不起作用。

我错过了什么?

$(document).ready(function() {
     var pageItem = $(".pagination li").not(".prev,.next");
     var prev = $(".pagination li.prev");
     var next = $(".pagination li.next");


     pageItem.click(function() {
       $('li.active').removeClass("active");
       $(this).addClass("active");
     });
  
     // stay on current button if next or prev button is ".next" or ".prev"  
     next.click(function() {
        if($('li.active').next() != next) {
          $('li.active').removeClass('active').next().addClass('active');
        }
     });

     prev.click(function() {
        if($('li.active').prev() != prev) {
          $('li.active').removeClass('active').prev().addClass('active');
        }
     });


   });
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
          <ul class="pagination">
            <li class="prev">
              <a href="#"><span>&laquo;</span></a>
            </li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li class="next">
              <a href="#"><span>&raquo;</span></a>
            </li>
          </ul>
        </nav>

最佳答案

jQuery 选择器返回一个数组对象,对象不能被视为相等,除非它们是彼此派生的。

var a = [] 
var b = []
console.log(a==b); //would output false

如果您更改代码以选择数组中的项目,您将获得实际的 DOM 节点

$('li.active').next()[0] != next[0]

关于javascript - 当它们排在下一个时,如何不切换到第一个或最后一个 "li element"?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31488607/

相关文章:

JQuery:检查 jquery 插件是否已被调用

jquery - 如何更改 jquery html 内容?

html - 我的网站无法在 Facebook 应用内浏览器中打开

image - 使用 CSS3 反射图像的一部分

javascript - 延迟加载外部 Javascript 文件

javascript - Vuex 突变后如何获取值?

c# - 引用 javascript 中的 Razor 语法

javascript - 单击时删除添加的行之一

php - 如何将多个 jQuery 日期选择器值发送到数据库

html - 如何禁用文本区域或 mat-form-field