0

我的 HTML：

<div class="container"><img src="path" class="A" id="A" /></div>
<div class="container"><img src="path" class="A" id="B" /></div>
<div class="container"><img src="path" class="A" id="C" /></div>
<div class="container"><img src="path" class="A" id="D" /></div>
<div id="Holder"></div>//displays large image
<div id="next">Next</div>//is used to displays next image
<input type="hidden" id="image_holder" />

我的 jQuery：

 /******Place image in large holder********/
$(document).ready(function(){
    var i,a,h;
    h=$('#image_holder');
    i=$('img.A').prop('id');
    a="<img src='my path/" + i + ".jpg' class='C' />";
    $('#Holder').html(a); 
    h.val(i);
});
/*******Next Image*****************/
$(document).ready(function(){
    $('#next').on('click',function(){
        var ih,nxt, 
        ih=$('#image_holder').val()//id of the last image
        nxt=$('#' + ih).next('img.A').prop('id');
        //nxt=$('#' + ih).siblings().next('img.A').prop('id');I have also tried
        //nxt=$('#' + ih).parent().siblings().next('img.A').prop('id');I have also tried
        alert(nxt);
    });
});

警报给我的只是undefined. 我需要第一个图像 id 之后的下一个图像 ID。

当有人单击图像时，它会将图像放置在<div id="Holder">. 我想要的是当用户单击下一个按钮时，流程中的下一个图像被放置在持有人中。

有人可以看看我的代码并告诉我我做错了什么或我还没有做什么吗？当我删除时，.prop('id')我会Object Object进入警报框。

4

4 回答 4

0

该.next()方法获取匹配元素集中每个元素的紧随其后的兄弟。

因为您的每个图像都单独包装在 a 中<div class="container">，所以它们没有直接的兄弟姐妹，并且调用.next()返回一个空集。当您随后调用时.prop()（注意：您应该使用.attr()它来提取 ID），它会返回 undefined，因为它正在对一组空元素进行操作。

要解决此问题，您可以将所有图像放在一个容器中。

<div class="container">
    <img src="path" class="A" id="A" />
    <img src="path" class="A" id="B" />
    <img src="path" class="A" id="C" />
    <img src="path" class="A" id="D" />
</div>

演示

于 2013-03-05T23:28:21.880 回答
0

.next()为您提供下一个兄弟元素，但您的img元素都是唯一的子元素。所以你实际上想先上一个层次。您已经接近您的第三个选项，但您需要记住返回一个级别：

nxt=$('#' + ih).parent().next('.container').children("img").first().prop('id');
于 2013-03-05T23:28:40.837 回答
0

您需要比预期多一点地遍历 DOM，简单地说：

next = $(this).closest('.container').next('.container').find('img');

$(this)当然，起点在哪里（替换为您实际使用的任何选择器）。

参考：

于 2013-03-05T23:34:15.347 回答
-1

希望对您有所帮助，我花了一天时间寻找它...问题是（'img'）标签必须用大写（'IMG'）填写，否则jquery将无法识别它。好了！

于 2017-12-25T23:39:39.700 回答