如何使用Javascript查找Next Image src

How to find Next Image src with Javascript

本文关键字:Image src Next 查找 何使用 Javascript      更新时间:2023-09-26

我选择了这种方式,这样我就可以把一只装满图像的手放进文件夹,就这样,我尝试了很多方法,但都不起作用,我最近的尝试是使用

$(".image-container").find("img[src=" + Img + "]").next('img').attr('src');

但仍然没有成功。

这就是我到目前为止所想到的,任何帮助都会很棒,谢谢

<div id="removed-container" style="height: 600px;">
<div id="removed" style="height: 600px;">
<div style="float: left; width: 200px;">
  <h1> <span>The Gallery</span> </h1>
  <ul id="nav">
    <li><a href="" id="here">Gallery</a>
      <ul>
        <li><a href="#" data-albumid="gallery/fld01/">2015</a></li>
        <li><a href="#" data-albumid="gallery/fld02/">2015</a></li>
        <li><a href="#" data-albumid="gallery/fld03/">2015</a></li>
        <li><a href="#" data-albumid="gallery/fld04/">2015</a></li>
        <li><a href="#" data-albumid="gallery/fld05/">2015</a></li>
      </ul>
    </li>
    <li><a href="index.html">Back to home</a></li>
  </ul>
</div>
<div class="image-container"></div>
<script type="text/javascript"> $(document).ready(function () {
    $("a").click(function () {
        var dir_path=$(this).data("albumid");
        LoadGallery(dir_path);
        return false;
    });
});
function LoadGallery(dir_path) {
    $.ajax({
        url: dir_path,
        success: function(data) {
            $(".image-container").empty();
$(data).find("a:contains(.jpg), a:contains(.png), a:contains(.jpeg)").each(function() {
                 this.href.replace(window.location.host,"").replace("http:///",""); file=dir_path+$(this).text();
                $(".image-container").append($("<a href='java<!-- no -->script:;' class='thumb' data-src='"+file+"'><img src='"+file+"' title='Click to enlarge' alt='#'/></a>"));
                if ($(".image-container").children("a").length == 30) {
                    return false;
                }
            });
            $(".thumb").bind('click', function() {
                var Popup="<div class='bg'></div>"+"<div class='wrapper'><img src='<img src=''/>"+"<label href='javascript:;' class='prev-image'>&laquo;</label><label href='javascript:;' class='next-image'>&raquo;</label><a href='java<!-- no -->script:;' class='close' title='Close'>Close</a>";
                Img = $(this).attr("data-src"),
                $("body").prepend(Popup);
                $(".bg").height($(window).height()*4);
                $(".wrapper img").attr("src", Img);
                $(".prev-image").bind ('click',function() {
                    alert("Prev")
                })
                $(".next-image").bind ('click',function() {
                next = $(".image-container").find("img[src=" + Img + "]").next('img').attr('src');
                //alert(next) 
                })
                $(".close").bind ('click',function() {
                    $(this).siblings("img").attr("src", "")
                        .closest(".wrapper").remove();
                    $(".bg").remove();
                });
            });
        }
    });
} </script>
<div class="clear"></div>

问题出在next()的使用上。

从文档中获取匹配元素集中每个元素的紧挨着的同级元素。

和您的情况一样,img不是兄弟,因此,不存在匹配的元素集。

如果你的层次结构是严格的,并且不会改变,那么你可以做一些事情,比如遵循

/* Find image - go its parent - go to next anchor - get the image - get the source */ 
$(".image-container").find("img[src='" + Img + "']").parent().next('a').find("img").attr('src');

否则,您可以对图像进行迭代。

供参考-http://plnkr.co/edit/onUeWl8mPqVhtaHf37xp?p=preview

请尝试以下操作:

$('#id').next().find('img').attr("src");