使用 hide() 单击每个按钮，逐渐隐藏一组匹配的 li 元素中的项目，然后在集合末尾显示整个集合

发布于 2024-09-15 05:04:01 字数 2960 浏览 3 评论 0原文

我是 jQuery 新手，在尝试创建函数时，我在语法、选择器和优化方面遇到了麻烦。我希望有人能够提供帮助。

我想要实现的目标：

我有一个由 ul 组成的画廊，其中图像放置在垂直堆叠的列表项中。 ul 位于固定大小的包装器中，并带有溢出：隐藏，因此仅显示第一个列表项。用户单击按钮，然后使用 hide(400) 隐藏第一个 li。这使得其他列表项向上流动并显示包装器窗口中的第二个列表项。

当最后一个列表项可见时，单击将再次显示（400）所有列表项，使它们重新按顺序排列，并且只有第一个项目将再次显示。

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

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

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

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

提前致谢！汤姆用户界面

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

原文

I am new to jQuery and I am having trouble with the syntax, selectors and refining when trying to create functions. I was hoping someone might be able to help.

What I am trying to achieve:

I have a gallery consisting of a ul with images placed in vertically stacked list items. The ul is in a fixed size wrapper with overflow:hidden so only the first list item displays. The user clicks a button and the first li is hidden using hide(400). This makes the other list items flow up and reveals the second list item within the wrapper window.

When the last list item is visible, the click will show(400) all of the list items again, causing them to flow back into order and only the first item will be showing again.

Further clicks will repeat this process from the beginning.

I know what I would like to do in terms of code, but I am having trouble with the correct syntax, selectors and refining.

I have included the html and description version of the code I was hoping to create. I know the code could be much more efficient by placing functions into varibles and testing for true false, but I would like to see the steps with my longer code description for learning purposes. Perhaps afterwards someone can blast it off in two lines.

Regardless, thanks to anyone who can help with this. I love the possibilities of jQuery and look forward to learning more.

Thanks in advance!
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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

深白境迁sunset 2024-09-22 05:04:01

试试这个：

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 函数，请查找它。

演示此处

Try this:

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

I've removed your listPosition array (which wasn't being used properly). Look up the JQuery eq function if you're not familiar with it.

Demo here

回复收藏 0 原文

~没有更多了~