Javascript 仅显示最后一个元素

在my

中，我只想显示最后一个元素，直到和除非单击按钮，然后隐藏最后一个元素并显示最后第二个元素

我是这样想的：

var amount = $('#slider > ul li').length);
$( document ).ready(function() {
  $('#slider').css("opacity", 0);
  $('#slider > ul li').find(amount).css("opacity", 1);
});

当我提醒

$（'#slider>ul li'）.length）

时，我正确地获得了列表项的数量

它使用

$（'#slider>ul li'）.length）正确隐藏所有

但是当我把最后一行放进去时，所有的li都再次显示出来

如何仅激活最后一个

计划是在这之后将其拆分，每次按下按钮时减少计数器，然后再次隐藏除最后一个项目（金额-1）之外的所有项目。
如果将
不透明度0
设置为
UL
，它将隐藏其内部的所有
li
。所以你喜欢

CSS:

JS:

此外，还必须将元素缓存代码放入
dom ready
处理程序中。因为如果js代码在你的脑袋里，它可能会失败


此代码将更好地帮助您

var amount = $('#slider > ul > li');
amount.filter(":last-child").addClass("viewable");
$("#someBtn").click(function () {
    var elem = amount.filter(".viewable").removeClass("viewable").prev();
    elem = elem.length == 0 ? amount.filter(":last-child") : elem;
    elem.addClass("viewable");
});

如果将
opacity 0
设置为
UL
，它将隐藏其内部的所有
li
。所以你喜欢

CSS:

JS:

此外，还必须将元素缓存代码放入
dom ready
处理程序中。因为如果js代码在你的脑袋里，它可能会失败


此代码将更好地帮助您

var amount = $('#slider > ul > li');
amount.filter(":last-child").addClass("viewable");
$("#someBtn").click(function () {
    var elem = amount.filter(".viewable").removeClass("viewable").prev();
    elem = elem.length == 0 ? amount.filter(":last-child") : elem;
    elem.addClass("viewable");
});

我编写了两个函数，第一个是隐藏除最后一个之外的所有li函数：

function hideListItems(){
    $('#slider ul li').hide(); 
    $('#slider ul li').last().addClass('active').show();
};

另一个用于切换上一个li：

function togglePrevListItem(){
    $('#slider ul li.active').removeClass('active').hide().prev().addClass('active').show();
};

祝你好运
 我编写了两个函数，第一个是隐藏除最后一个以外的所有li函数：

function hideListItems(){
    $('#slider ul li').hide(); 
    $('#slider ul li').last().addClass('active').show();
};

另一个用于切换上一个li：

function togglePrevListItem(){
    $('#slider ul li.active').removeClass('active').hide().prev().addClass('active').show();
};

祝你好运
 

每当要取消隐藏上一个列表元素时，调用
toggleLi（）

每当您想要取消隐藏上一个列表元素时，调用
toggleLi（）
，使用
last（）
和
prev（）
使用
last（）
和
prev（）
@martijnkerckhart，第二个代码段将以循环方式工作。您还可以将css规则从
opacity 0
替换为
display none
，将其隐藏并将其修补到滑块上。@martijnkerckhart第二个代码段将以循环方式工作。此外，您还可以将css规则从
opacity 0
替换为
display none
，以隐藏它并将其修补到滑块上。