我正在尝试编写我的第一个自建jQuery脚本,作为一个超级简单的图库。
CSS:
#gallery li{
display:none;
}
#gallery li.current {
display: block;
}
HTML:
<div id="gallery">
<li class="current"><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
</div>
<div id="controls">
<span id="left"><</span>
<span id="right">></span>
</div>
JQUERY:
$(function(){
$('#controls #left').click(function(){
var old = $('li.current');
$('li.current').removeClass('current');
if (old = $('#gallery:first-child')){
$('#gallery:last-child').addClass('current');
}else{
$(old).prev('li').addClass('current');
}
});
$('#controls #right').click(function(){
var old = $('li.current');
if (old = $('#gallery:last-child')){
$('#gallery:first-child').addClass('current');
}else{
$('li.current').removeClass('current');
$(old).next('li').addClass('current');
}
});
});
直到我添加了if / else语句来检查我们是否正在查看第一个/最后一个图库图像。我想要这个陈述,以便画廊循环。无法弄清楚为什么它不起作用,而调试却什么也没给我。
我可以向正确的方向努力吗?
编辑:使用下面的一些建议,这是我在的地方:
$(function(){
$('#left').click(function(){
var old = $('li.current');
old.removeClass('current');
if (old == $('#gallery li:first-child')){
$('#gallery li:last-child').addClass('current');
}else{
old.prev('li').addClass('current');
}
});
$('#right').click(function(){
var old = $('li.current');
old.removeClass('current');
if (old == $('#gallery li:last-child')){
$('#gallery li:first-child').addClass('current');
}else{
old.next('li').addClass('current');
}
});
});
仍然没有循环(在第一张图片上按“左”使画廊空白,在最后一张图片上按“右”也是如此)
答案 0 :(得分:1)
您可能希望使用==
:
if (old == $('#gallery:first-child')){
和
if (old == $('#gallery:last-child')){
虽然杰克指出,这无论如何都行不通,因为它们是单独的jQuery调用,可能会选择相同的元素并返回类似的jQuery对象,但是不能用于比较,因为它们是DOM元素的独立集合。正确的方法是使用我在下面提供的.is
... 或来与之比较:
if (old[0] == $('#gallery:first-child')[0]){
将它们索引为检索所选集合中的第一个项目,这些项目是实际的DOM元素,并且可以进行比较。可能不是首选,但没有错。
以下是证明这是真的示例:http://jsfiddle.net/4adSj/
你也做了一些奇怪的事情。您无需使用此选择器:$('#controls #right')
- $('#right')
非常独特,这要归功于id
应该如何使用。
此外,您存储var old = $('li.current');
,然后使用old
存储下一行,而不是[{1}}重新获得它。
此外,您将$('li.current')
元素嵌套在<li>
中,而它们只应嵌套在<div>
,<ul>
或<ol>
中。
另外一个 - 变量<menu>
是一个jQuery对象,因此在声明它之后,您不需要每次都想要访问它old
。只需使用$(old)
。
最后,另一个问题是你的old.jQueryMethod()
语句选择器:
if
表示找到具有$('#gallery:last-child')
“图库”并且是最后一个子元素的元素。你可能想要:
id
这意味着找到子元素是父元素的最后一个$('#gallery > li:last-child')
子元素,其中li
为“gallery”。
所以这是我对你最终代码的建议:
id
答案 1 :(得分:0)
您可以使用.is(':first-child)
和.is(':last-child')
分别查看某些内容是第一个还是最后一个孩子:
$('#controls #left').click(function() {
var old = $('li.current')
.removeClass('current');
if (old.is(':first-child')) {
// search the siblings for the last child
old.siblings(':last-child').addClass('current');
} else {
$(old).prev('li').addClass('current');
}
});
$('#controls #right').click(function() {
var old = $('li.current')
.removeClass('current');
if (old.is(':last-child')) {
old.siblings(':first-child').addClass('current');
} else {
$(old).next('li').addClass('current');
}
});
顺便说一句,我会将你的HTML更改为:
<div id="controls">
<span class="left"><</span>
<span class="right">></span>
</div>
然后使用$('#controls .left')
和$('#controls .right')
定位您的可点击元素。
修改强>
更高级的方法可能是这个,值得深思:
// wrap the functionality inside an anonymous function
// localizing the gallery and controls blocks
(function($gallery, $controls) {
var pos = 0;
// this function performs the actual move left and right, based on event data being passed in via evt.data.delta
function move(evt) {
var $items = $gallery.children(), // if the gallery never changes size you should cache this value
max = $items.length;
$items.eq(pos).removeClass('current');
pos = (pos + evt.data.delta) % max; // update the position
$items.eq(pos).addClass('current');
}
// attach the controls
$controls
.on('click', '.left', {
delta: -1 // left decreases the position
}, move)
.on('click', '.right', {
delta: 1 // right increases the position
}, move);
// make sure the first is always selected
$gallery.children().removeClass('current').eq(pos).addClass('current');
}($('#gallery'), $('#controls'))); // immediate invocation
答案 2 :(得分:0)
<强> jsBin demo 强>
var c = 0;
var imgN = $('#gallery li').length; // 4
$('#left, #right').click(function(){
c = this.id=='right' ? ++c : --c ;
$('#gallery li').hide().eq( c%imgN ).show();
});
甚至:
var c = 0;
$('#left, #right').click(function(){
$('#gallery li').hide().eq( (this.id=='right'?++c:--c) % 4 ).show();
});
<强> gallery Demo 强>
P.S:而不是.hide()
,您可以使用.removeClass('current')
而不是.show()
,您可以使用.addClass('current')