Я новичок в jQuery, и у меня возникают проблемы с синтаксисом, селекторами и уточнениями при попытке создания функций. Я надеялся, что кто-то сможет помочь.
Чего я пытаюсь достичь:
У меня есть галерея, состоящая из ul с изображениями, помещенными в вертикально расположенные элементы списка. Ul находится в оболочке фиксированного размера с переполнением: скрыто, поэтому отображается только первый элемент списка. Пользователь нажимает кнопку, и первая li скрывается с помощью hide (400). Это заставляет другие элементы списка перемещаться вверх и выявляет второй элемент списка в окне оболочки.
Когда последний элемент списка виден, щелчок покажет (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>