Question

我正在尝试使用jQuery中的上一个和下一个导航选项对照片查看器进行编码。除了上一个导航按钮之外，它完全正常工作。我很困惑，因为如果首先按下“下一步”按钮，“prevoius”按钮实际上有效，但如果先按下“上一步”按钮，不仅没有发生任何事情，而且“下一步”按钮也会中断！想法？我认为这可能是初始化问题......

这是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>

jQuery Photo Viewer with / Prev和Next Buttons

0 个答案: