Question

我是jQuery的新手，我在尝试创建函数时遇到语法，选择器和精炼问题。我希望有人可以提供帮助。

我想要实现的目标：

我有一个由ul组成的图库，图像放在垂直堆叠的列表项中。 ul是一个固定大小的包装器，带有overflow：hidden，因此只显示第一个列表项。用户单击按钮，使用hide（400）隐藏第一个li。这使得其他列表项向上流动并显示包装器窗口中的第二个列表项。

当最后一个列表项可见时，点击将再次显示（400）所有列表项，使它们回流到订单中，只有第一个项目将再次显示。

进一步点击将从头开始重复此过程。

我知道在代码方面我想做什么，但我在使用正确的语法，选择器和精炼方面遇到了麻烦。

我已经包含了我希望创建的代码的html和描述版本。我知道通过将函数放入变量并测试真假，代码可以更高效，但我希望看到用于学习目的的更长代码描述的步骤。也许之后有人可以分两行进行爆炸。

无论如何，感谢任何可以提供帮助的人。我喜欢jQuery的可能性，并期待了解更多。

提前致谢！ ThomUI

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>list hiding test</title>
<style>
.listWrapper {
height:25px;
width:380px;
background-color:#d6d6d6;
float:left;
font-size:18px; 
margin:0; 
list-style:none;
overflow:hidden;
}
span { color:blue; text-decoration:underline; cursor:pointer; }
.example { font-style:italic; }
a.nextItemBtn {
background-color:#888888;
cursor:pointer;
width:120px;
height:120px;
float:left;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>

<body>

  <ul class="listWrapper">
    <li ><a href=""><img src="" />pic 1</a></li>
    <li ><a href=""><img src="" />pic 2</a></li>
    <li ><a href=""><img src="" />pic 3</a></li>
    <li ><a href=""><img src="" />pic 4</a></li>
  </ul>
 <a class="nextItemBtn"><img src="" />see more</a>

<script>

var listLength = 4; //number of li items in the ul, this will be dynamic, here we test with 4
var listCounter = 0; //show(400) all list items once we reach the end (listLength -1)
var listPosition = [0]; //the first spot in the returned set of matched elements, incremented at each click()

$(".nextItemBtn").click(function () {//click nextItemBtn

if (listCounter == listLength -1) {//if we reach the end of the list, make the entire list visible again using show(400)
    $(".listWrapper li").show(400); //show all list items
    listCounter = 0;//reset the listCounter, this will allow the user to see the first list item again while the rest remain overflow:hidden
    listPosition = [0];//reset list position
}
else {
    $(.listWrapper li[listPosition]).hide(400);//get the first li in listWrapper and hide(400)
    listCounter ++;//add one to the number of li items we have hidden
    listPosition ++;//add one to the index position so next click() the second li in listWrapper will hide(400), next time the third etc 
    //I'm pretty sure you can't stick a variable in for an index number... doh!
}
});

</script>

</body>
</html>

Answer 1

试试这个：

var listLength = 4; //number of li items in the ul, this will be dynamic, here we test with 4
var listCounter = 0; //show(400) all list items once we reach the end (listLength -1)

$(".nextItemBtn").click(function () {//click nextItemBtn

if (listCounter == listLength -1) {//if we reach the end of the list, make the entire list visible again using show(400)
    $(".listWrapper li").show(400); //show all list items
    listCounter = 0;//reset the listCounter, this will allow the user to see the first list item again while the rest remain overflow:hidden
}
else {
    $('.listWrapper li').eq(listCounter).hide(400);//get the first li in listWrapper and hide(400)
    listCounter ++;//add one to the number of li items we have hidden
}
});

我删除了您的listPosition数组（未正确使用）。如果你不熟悉它，请查看JQuery eq函数。

演示here

使用hide（）逐步隐藏来自一组匹配的li元素的项目，每个按钮单击，然后在集合结束时show（）整个集合

1 个答案: