Question

我是JQuery的新手。我创建了一个带有网格布局的图库，并添加了一个带有prev＆amp; amp;的模态视图。下一个按钮与简单的JavaScript。工作得很好。现在我正在尝试使用jquery api来做同样的事情（open，close，next，prev）。开放，近距离活动正常。我坚持上一个/下一个事件。使用.prev（）后，我得到imgIndex的未定义值。当然因为我错了树导航。无法找到出路...

$(document).ready(function(){
    var currentImg;

    $(".myImg").click(function(){   //open the selected image
        currentImg = $(this);
        $("#myModal").css("display", "block");
        img_index = $(this).attr("imgIndex");
        showModalImg($(this).attr("src"));
    });
    $(".prev").click(function(){
        alert (currentImg.prev().attr("imgIndex"));  //undefined
        if(currentImg.attr("imgIndex") == 1){
            alert("first");
            currentImg = $(".myImg").last();    //ok
        }
        else{
            alert("not first");
            currentImg = currentImg.prev();
        }
        alert(currentImg.attr("imgIndex"));  //undefined
    });

这是画廊的结构..

<div class="row">
                <div class="column">
                    <img src="" class="myImg" imgIndex="1"></img>
                    <img src="" class="myImg" imgIndex="2"></img>
                    <img src="" class="myImg" imgIndex="3"></img>
                    <img src="" class="myImg" imgIndex="4"></img>
                    <img src="" class="myImg" imgIndex="5"></img>
                </div>
                <div class="column">
                    <img src="" class="myImg" imgIndex="6"></img>
                    <img src="" class="myImg" imgIndex="7"></img>
                    <img src="" class="myImg" imgIndex="8"></img>
                    <img src="" class="myImg" imgIndex="9"></img>
                    <img src="" class="myImg" imgIndex="10"></img>
                </div>
                so on...
                <div id="myModal" class="modal">
                    <span class="close">&times;</span>
                    <img class="modal-content" id="img01" width="100%">
                    <a class="prev">&#10094;</a>
                    <a class="next">&#10095;</a>
                </div>
</div>

Answer 1

有几个原因导致它未定义：

现在只有在实际点击图片时才会设置currentImg。因此，如果您从未点击过图像，它将保持未定义状态。
由于图像6-10在不同列中的DOM结构，imgIndex = 6将始终未定义prev（），因为在这种情况下没有前一个元素。如果您需要这样的布局，那么您可以预先缓存图像，这样的事情怎么样？

＆＃13;

$(document).ready(function(){
    var currentImg;
    var img_index = 1;
    var $images = $(".myImg");

    $(".myImg").click(function(){   //open the selected image
        currentImg = $(this);
        console.log(currentImg.attr('imgIndex'));
        $("#myModal").css("display", "block");
        img_index = $(this).attr("imgIndex");
        console.log("new img_index:" + img_index)
        //showModalImg($(this).attr("src"));
    });

    $(".prev").click(function(){
        
        console.log("current index:" + (img_index - 1));
       
        if(img_index == 1){
            alert("first");
            currentImg = $images.eq($images.length - 1);
        }
        else{
            alert("not first");
            currentImg = $images.eq(img_index - 2);
        }
    });
});

＆＃13;

在获取具有相同类的所有元素（JQuery）之后找不到prev元素

1 个答案: