只显示最后一个元素

Show only last element

本文关键字：元素 最后一个 显示      更新时间：2023-09-26

在我的<li>中，我想只显示最后一个元素，除非单击按钮，然后隐藏最后一个并显示第二个最后一个。

我在想这样的事情:

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>。

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

如何只激活最后一个?

计划是在此之后将其拆分并每次按下按钮时减少计数器，然后再次隐藏除最后第二个项目(金额- 1)之外的所有项目。

如果您将opacity 0设置为UL，它将隐藏所有li在它里面。所以，

CSS: 

.viewable { opacity : 0; }

JS: 

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

还必须将元素缓存代码放在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();
};

祝你好运!

工作示例

$( document ).ready(function() {
  var lis = $('#slider > ul > li');
  lis.not(lis.filter(':last')).hide();
  function toggleLi() {
    var visible = lis.filter(':visible');
    visible.hide();
    if (visible.prev().length) {
      visible.prev().show();
    }
  }
});

当您想要取消隐藏前一个列表元素

时调用toggleLi()
相关文章：