Jquery 选择倒数第二个 child

Question

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

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

此外，当我单击向左箭头和 console.log 最后一个 child 时，我得到了我想要正确显示的图像，但叠加层中的图像是第二个最后一张图片。

<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 选择倒数第二个 child

Jquery selects second to last child

html

javascript

jquery

jquery-selectors