Question

当我使用Jquery构建一个灯箱时，发生了一件有趣的事情。我设置了左右箭头按钮以在列表中移动，以便在最后一个孩子处，右箭头按钮再次从第一个孩子或第一个孩子开始，左箭头按钮移动到最后一个孩子。

发生的事情是我的左箭头按钮应该从第一个孩子移动到最后一个孩子，而是跳过最后一个孩子并显示倒数第二个孩子的照片。我没有遇到同样的问题，右箭头按钮从最后一个孩子移动到第一个孩子。

另外，当我点击左箭头和console.log最后一个孩子时，我得到了我想要正确显示的图像，但是叠加中的图像是倒数第二个图像。

<body>
    <h1>Image Gallery</h1>
    <ul id="imageGallery">
        <li>
            <a href="images/refferal_machine.png">
                <img src="images/refferal_machine.png" width="100" alt="Refferal Machine By Matthew Spiel">
            </a>
        </li>

        <li><a href="images/space-juice.png"><img src="images/space-juice.png" width="100" alt="Space Juice by Mat Helme"></a></li>
        <li><a href="images/education.png"><img src="images/education.png" width="100" alt="Education by Chris Michel"></a></li>
        <li><a href="images/copy_mcrepeatsalot.png"><img src="images/copy_mcrepeatsalot.png" width="100" alt="Wanted: Copy McRepeatsalot by Chris Michel"></a></li>
        <li><a href="images/sebastian.png"><img src="images/sebastian.png" width="100" alt="Sebastian by Mat Helme"></a></li>
        <li><a href="images/skill-polish.png"><img src="images/skill-polish.png" width="100" alt="Skill Polish by Chris Michel"></a></li>
        <li><a href="images/chuck.png"><img src="images/chuck.png" width="100" alt="Chuck by Mat Helme"></a></li>
        <li><a href="images/library.png"><img src="images/library.png" width="100" alt="Library by Tyson Rosage"></a></li>
        <li><a href="images/boat.png"><img src="images/boat.png" width="100" alt="Boat by Griffin Moore"></a></li>
        <li><a href="images/illustrator_foundations.png"><img src="images/illustrator_foundations.png" width="100" alt="Illustrator Foundations by Matthew Spiel"></a></li>
        <li><a href="images/treehouse_shop.jpg"><img src="images/treehouse_shop.jpg" width="100" alt="Treehouse Shop by Eric Smith"></a></li>
    </ul>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>

</body>

JavaScript：

var $overlay = $('<div id="overlay"></div>');
var $image = $('<img>');
var $caption = $('<p></p>');
var $arrowLeft = $('<button id="left" class="arrow">&lsaquo;</button>');
var $arrowRight = $('<button id="right" class="arrow">&rsaquo;</button>');
var $exit = $('<button id="exit">X</button>');

//Add image to overlay
$overlay.append($image);

//Add buttons to overlay
$overlay.append($arrowRight);
$overlay.append($arrowLeft);
$overlay.append($exit);

//Add caption to overlay
$overlay.append($caption);

//Add overlay
$('body').append($overlay);


//Capture the click event on a link to an image
$('#imageGallery a').click(function(event) {
    event.preventDefault();
    var imageLocation = $(this).attr("href");

    //Update overlay with the image linked in the link
    $image.attr('src', imageLocation);

    //Show the overlay
    $overlay.show();

    //Get child's alt atribute and set caption
    var captionText = $(this).children('img').attr('alt');
    $caption.text(captionText);
});

//When left arrow is clicked
$arrowLeft.click(function() {
    $('#imageGallery li a img').each(function() {
        var galleryImage = $(this);
        if (galleryImage.attr('src') === $image.attr('src')) {
            var li = galleryImage.parent().parent();
            if (li.is(':first-child')) {
                var gallery = li.parent();
                var lastLi = gallery.children(':last-child');
                var anchor = lastLi.children('a');
                var image = anchor.children('img');
                $image.attr('src', image.attr('src'));
                console.log(lastLi);
            } else {
                var prevLi = li.prev();
                var anchor = prevLi.children('a');
                var image = anchor.children('img');
                $image.attr('src', image.attr('src'));
                return false;
            }
        }
    });
});

//When right arrow is clicked
$arrowRight.click(function() {
    $('#imageGallery li a img').each(function() {
        var galleryImage = $(this);
        if (galleryImage.attr('src') === $image.attr('src')) {
            var li = galleryImage.parent().parent();
            if (li.is(':last-child')) {
                var gallery = li.parent();
                var firstLi = gallery.children(':first-child');
                var anchor = firstLi.children('a');
                var image = anchor.children('img');
                $image.attr('src', image.attr('src'));
            } else {
                var nextLi = li.next();
                var anchor = nextLi.children('a');
                var image = anchor.children('img');
                $image.attr('src', image.attr('src'));
                return false;
            }
        }
    });
});

//When x button is clicked
$exit.click(function() {
    //Hide the overlay
    $overlay.hide();
});

Answer 1

更新1：

在处理程序中，您正在运行每个循环来测试每个图像元素，因此请确保在找到匹配的图像时使用return false;，否则您的循环在匹配后再运行一次：

//When left arrow is clicked
$arrowLeft.click(function() {
    $('#imageGallery li a img').each(function() {
        var galleryImage = $(this);
        if (galleryImage.attr('src') === $image.attr('src')) {
            var li = galleryImage.parent().parent();
            if (li.is(':first-child')) {
              // if code block
              ...
            } else {
               // else code block
               ...
            }
            // move this to here
            return false;
        }
    });
});

确保同时更新右箭头处理程序。

点击处理程序中的变量不正确：

//When left arrow is clicked
$arrowLeft.click(function() {
    if (li.is(':first-child')) {
            var gallery = li.parent();
            var lastLi = gallery.children(':last-child');
            var anchor = lastLi.children('a');
            var image = anchor.children('img');
            $image.attr('src', image.attr('href'));
            console.log(lastLi);
    } else {
   ...
});

应该是：

$image.attr('src', image.attr('src'));

您应该考虑将该逻辑加入一个处理函数中以减少代码量。

你也可以简化这个：

var li = galleryImage.parent().parent();

到此：

var li = galleryImage.closest('li');

Jquery选择倒数第二个孩子

1 个答案: