在“我”中,<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)以外的所有项目。
如果设置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] 删除。
我来说两句