我有几个具有唯一类'slide_image'和唯一ID的div。在每个div中,我有两个链接,“#next”和“#prev”。我想做的是为每个div获取下一个和上一个div的id,并将id和ty链接属性化。
例如.slide_image id=slide_3
<div id="slide_2" class="slide_image">
1
<a href="#slide_3" id="next"></a><a href="#slide_1" id="prev"></a>
</div>
<div id="slide_3" class="slide_image">
1
<a href="#slide_4" id="next"></a><a href="#slide_2" id="prev"></a>
</div>
这是我尝试过的,但它不起作用,我想我的each()函数有问题:
$('.slide_image').each(function(e){
var next_link = $(this).next().attr('id');
$( "a#next" ).next().attr("href", next_link)
});
$('.slide_image').each(function(e){
var prev_link = $(this).prev().attr('id');
$( "a#prev" ).prev().attr("href", prev_link)
});
下面是一个包含我所有代码Jsfiddle:http://jsfiddle.net/4yzg25o2/1/
有人能帮我吗?
多谢了
1条答案
按热度按时间rryofs0p1#
我首先要做的是人们的建议。将
#next
和#prev
更改为类.next
和.prev
。然后循环每个
.slide_image
并找到它的索引(索引将是其父元素中的当前.slide_image
元素。所以第一个.slide_image
是1,第二个是2,以此类推)。然后从这里得到下一个和上一个索引(所以1将是-1和2)。然后,我们可以使用jQuery'seq()
通过索引查找元素。一旦我们有了元素,我们就可以通过使用attr()来获取它的id。然后只需将这些ID添加到
.next
和.prev
链接。看看http://jsfiddle.net/4yzg25o2/6/,它有一个工作示例。
我没有检查错误处理,但如果
eq()
要查找的元素不存在(例如索引为-1的元素),它将返回undefined
。所以你可以用它来展示其他的幻灯片。例如,如果我们在第一张幻灯片上,.prev
是否应该链接到最后一张幻灯片,或者我们是否应该简单地隐藏链接,以防止他们单击返回?在我的代码中需要注意的一点是在
$(".next", this)
中使用了this
。基本上第二个属性是上下文,看看这个SO post。