仅显示最后一个元素

马丁·克尔克哈特(Martijn Kerckhaert)

在“我”中,<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)

但是,当我将最后一行放到那里时,所有li都会再次显示。

我怎样才能只激活最后一个?

此后的计划是将此工作分解起来,并在每次按下按钮时减少计数器,然后再次隐藏除倒数第二个项目(数量-1)以外的所有项目。

拉贾普布(Rajabrabhu Aravindasamy)

如果设置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");
});

演示

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章