Question

我已按照此页面中的解决方案进行操作。
How to create simple next and prev trigger button for slider's pagination buttons?

但是当我尝试这样做时它不起作用，因为它不会将“选择主动”改为另一个。

$('.previous, .next').on('click', function() {
    if ($(".selected-active")[$(this).attr('class')]().index()!=-1)
    $(".selected-active").removeClass('selected-active')[$(this).attr('class')]().addClass('selected-active');
});

HTML：

    <div class="row">
        <div class="previous"><span class="glyphicon glyphicon-chevron-up"></span>Previous</div>
    </div>

    <div class="row bottom">
        <div class="next"><span class="glyphicon glyphicon-chevron-down"></span>Next</div>
    </div>

    <div class="row">
            <ul class="container">
                <li class="section-container"><h6>Topic: Test</h5>
                    <ul>
                        <li class="item selected-active">
                            <a>
                             <span class="title">part 1: Introduction</span>
                            </a>
                        </li>
                        <li class="item">
                            <a>
                            <span class="title" >Part 2 : Content</span>                                
                            </a>
                        </li>
                    </ul>
                </li>
          </ul>
            <ul class="container">
                <li class="section-container"><h6>Topic: Test 2</h5>
                    <ul>
                        <li class="item">
                            <a>
                             <span class="title">part 1: Introduction</span>
                            </a>
                        </li>
                        <li class="item">
                            <a>
                            <span class="title" >Part 2 : Content</span>                                
                            </a>
                        </li>
                    </ul>
                </li>
          </ul>
     </div>

Answer 1

您需要的方法是prev()和next()，因为类与prev不匹配可以执行以下操作

$('.previous, .next').on('click', function() {
    var traverse = $(this).hasClass('next') ? 'next' : 'prev';
    if ($(".selected-active")[traverse]().index()!=-1)
    $(".selected-active").removeClass('selected-active')[traverse]().addClass('selected-active');
});

的 DEMO

Answer 2

我会这样做：

$('.prev').on('click', function() {
  var i = $(".item").index($(".selected-active"));
  i = i > $('.item').length-1 ? 0 : i-1 ;
  $(".item").removeClass('selected-active').eq(i).addClass('selected-active');
});

$('.next').on('click', function() {
  var i = $(".item").index($(".selected-active"));
  i = i < $('.item').length-1 ? i+1 : 0 ;
  $(".item").removeClass('selected-active').eq(i).addClass('selected-active');
});

.selected-active {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
        <div class="prev"><span class="glyphicon glyphicon-chevron-up"></span>Previous</div>
    </div>

    <div class="row bottom">
        <div class="next"><span class="glyphicon glyphicon-chevron-down"></span>Next</div>
    </div>

<br/>

    <div class="row">
            <ul class="container">
                <li class="section-container"><h6>Topic: Test</h5>
                    <ul>
                        <li class="item selected-active">
                            <a>
                             <span class="title">part 1: Introduction</span>
                            </a>
                        </li>
                        <li class="item">
                            <a>
                            <span class="title" >Part 2 : Content</span>                                
                            </a>
                        </li>
                    </ul>
                </li>
          </ul>
             <ul class="container">
                <li class="section-container"><h6>Topic: Test 2</h5>
                    <ul>
                        <li class="item">
                            <a>
                             <span class="title">part 1: Introduction</span>
                            </a>
                        </li>
                        <li class="item">
                            <a>
                            <span class="title" >Part 2 : Content</span>                                
                            </a>
                        </li>
                    </ul>
                </li>
          </ul>
     </div>

Answer 3

使用next()和prev()函数可以非常简单地完成此操作：

$('.previous, .next').click(function() {
    if ($(this).hasClass("previous") && $(".selected-active").prev().length) {
        $(".selected-active").removeClass('selected-active').prev().addClass('selected-active');
    } else if ($(this).hasClass("next") && $(".selected-active").next().length) {
        $(".selected-active").removeClass('selected-active').next().addClass('selected-active');
    }
    console.log($(".selected-active").text().trim());
});

此代码使用.hasClass()方法检查按下了哪个按钮，然后检查selected-active元素之前或之后是否有元素（使用.next().length和{{ 1}}）。然后，它从当前具有该类的元素中删除.prev().length类，并将其应用于下一个或上一个项（如果存在）。如果它不存在，则不会更改当前元素。每次按下任一按钮时，代码都会向控制台输出selected-active元素的内容。

https://jsfiddle.net/636k980b/1/ 您可以使用F12开发人员工具查看控制台输出。

jQuery-下一个和上一个不起作用

3 个答案: