Question

在我的<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)时，我正确地获得了列表项的数量。

它会<li>正确隐藏所有$('#slider > ul li').length)。

但是当我把最后一行放在那里时，所有的李再次出现。

如何只激活最后一个？

计划用于在此之后将其拆分并在每次按下按钮时减少计数器然后再次隐藏除最后一个项目之外的所有项目（金额 - 1）。

Answer 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");
});

DEMO

Answer 2

我写了两个函数，第一个是隐藏所有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();
};

祝你好运！

Answer 3

Working example

$( 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()

仅显示最后一个元素

3 个答案:

DEMO