1

我正在尝试使用 jQuery 中的上一个和下一个导航选项编写照片查看器。除了上一个导航按钮外，它是完全可用的。我很困惑，因为如果先按下“下一个”按钮，“上一个”按钮实际上可以工作，但是如果先按下“上一个”按钮，不仅没有任何反应，而且“下一个”按钮也会中断！想法？？？我想这可能是一个初始化问题......

这是jQuery：

$(function() {
$("a:has(img.gallery_photo)").click(function(event) {
    var showPath = $(this).attr("href");
    var caption = $(this).attr("title");
    var curPhoto = this;
    var nextPhoto = $(this).next();

    if(nextPhoto.length == 0){
        nextPhoto = $("#gallery a:first");
    }

    event.preventDefault();

    // Previous Button
    $("#photo_show a#back").click(function(event) {
        var placeHolder2 = curPhoto;
        event.preventDefault();
        nextPhoto = curPhoto;
        curPhoto = placeHolder2.prev(); 
        if(curPhoto.length == 0){
            curPhoto = $("#gallery a:last");
        }
        $("span#display_photo").html("<img src=\"" + curPhoto.attr("href") + "\" width=\"500\" height=\"350\"/>");
        $("p#caption").html("<p id=\"caption\"><em>" + curPhoto.attr("title") + "</em> </p>");
    });

    // Next Button
    $("#photo_show a#next").click(function(event) {
    var placeHolder = nextPhoto;
        event.preventDefault();
        curPhoto = nextPhoto;
        nextPhoto = placeHolder.next();
        if(nextPhoto.length == 0){
            nextPhoto = $("#gallery a:first");
        }           
        $("span#display_photo").html("<img src=\"" + curPhoto.attr("href") + "\" width=\"500\" height=\"350\"/>");
        $("p#caption").html("<p id=\"caption\"><em>" + curPhoto.attr("title") + "</em></p>");
    });

    $("span#display_photo").html("<img src=\"" + showPath + "\" width=\"500\" height=\"350\"/>");
    $("p#caption").html("<p id=\"caption\"><em>" + caption + "</em></p>");
    $("#photo_show").fadeIn(500);
});
});

这是HTML：

<body>  
<div id="photo_show">
    <table id="photo_nav">
        <tr>
            <td width="10%" align="left"><a id="back" href=""><img src="prev.png" alt="Click for Previous Photo"/></a></td>
            <td width="80%" align="center"><span id="display_photo"><img src="Sample Pictures/Koala.jpg" width="500" height="350"/></span></td>
            <td width="10%" align="right"><a id="next" href=""><img src="next.png" alt="Click for Next Photo"/></a></td>
        </tr>
    </table>
</div>  
<div id="gallery">
    <a href="Sample Pictures/Desert.jpg" title="Desert"><img class="gallery_photo" src="Sample Pictures/Desert.jpg" width="200" height="130" alt="Cannot Be Displayed"/></a>
    <a href="Sample Pictures/Jellyfish.jpg" title="Jellyfish"><img class="gallery_photo" src="Sample Pictures/Jellyfish.jpg" width="200" height="130" alt="Cannot Be Displayed"/></a>
    <a href="Sample Pictures/Koala.jpg" title="Koala"><img class="gallery_photo" src="Sample Pictures/Koala.jpg" width="200" height="130" alt="Cannot Be Displayed"/></a>
</div>      
</body>
4

0 回答 0