Question

我的页面上有一个列表，其中每个 li 代表不同的内容块。

我只想要一个可见的块。具有“可见”类的 li 是要显示的那个。

当我点击下一个按钮时，我希望可见类移动到下一个 li 。与上一个按钮相同。

当我们到达终点时，我希望它从头开始。如果你在第一个上面点击“上一个”，它应该转到最后一个。

我从jquery开始，所以我需要帮助！

HTML结构

<ul class="container">
    <li>item1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>
<button type="button" class="prev">prev</button>
<button type="button" class="next">next</button>

CSS

.container li { display:none; }
.container li.visible { display:block; }

JS

$(document).ready(function() {
    $('.container li:first-child').addClass('visible');
});

var numberOfItems =  $('.container li').size();

$('.next').click(function(){
    $('.container').find('.visible').removeClass('visible').next().addClass('visible');
});

$('.prev').click(function(){
    $('.container').find('.visible').removeClass('visible').prev().addClass('visible');
});

我被困在那里！我觉得这段代码不是很好，我需要'循环'功能。有人可以帮忙吗？

Answer 1

看一下这个How to swap visible list item using next and previous buttons?链接，这将有助于您获得所需的答案。当您单击下一个按钮时，可见类将移动到下一个li，这与前一个按钮相同。如果它到达终点，它将从头开始，类似于Prev按钮 //对于下一个

 if (index == (length - 1)) {
            $('li').first().removeClass('invisible').addClass('visible');
        }

//对于Prev

if (index == 0) {
        $('li').last().removeClass('invisible').addClass('visible');
    }

我希望你能做到更多。一切顺利。

带有next / prev按钮的简单内容交换器

1 个答案: