Fatal编程技术网
  • javascript/
  • Javascript Jquery选择倒数第二个子项

Javascript Jquery选择倒数第二个子项

javascript jquery html

Javascript Jquery选择倒数第二个子项,javascript,jquery,html,jquery-selectors,Javascript,Jquery,Html,Jquery Selectors,当我使用Jquery构建一个灯箱时，发生了一件有趣的事情。我已经设置了左箭头和右箭头按钮来在列表中移动，这样在最后一个子项上，右箭头按钮从第一个子项开始，或者在第一个子项上，左箭头按钮移动到最后一个子项 发生的事情是，我的左箭头按钮应该从第一个孩子移动到最后一个孩子，但却跳过了最后一个孩子，显示了第二个孩子的照片。右箭头按钮从最后一个孩子移动到第一个孩子时，我没有同样的问题 另外，当我单击左箭头并选择console.log作为最后一个子项时，我得到了我想要正确显示的图像logged，但是叠加中的

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

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

另外，当我单击左箭头并选择console.log作为最后一个子项时，我得到了我想要正确显示的图像logged，但是叠加中的图像是倒数第二个图像

<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();
});

var$overlay=$（''）；

var$image=$（'更新1:

在处理程序中，您正在运行each循环来测试每个图像元素，因此，请确保在找到匹配图像时使用
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');



我知道我需要进行干式编程。但除此之外，image.attr（'href'）实际上与image.attr（'src'）的工作方式完全相同。不管是哪一个。在我所做的修订版中，我对它进行了更改，使它在显示href的地方现在显示src，这样当人们看到它时，就不会看到它并说“就是这样，这是你的问题"。不管怎样，我还是会遇到同样的问题。@johncolidge只是在帮助调试，就像在Firefox中一样，使用
href
图像不会改变。我已经用问题的其余部分更新了我的答案。我并不是说我不感谢你的帮助。我是。我对JS和Jquery还不熟悉，所以我有很多关于干式编程的知识要学习。我会尝试和你交流稍后再合并它们，但我希望在我做太多操作之前让它工作起来。不用担心-我添加的更新应该会帮助你。成功了！非常感谢。我实际上不知道如何将这两个单击处理程序合并为一个。我下一步将继续工作，但眼前的问题已经解决，一切都按预期工作。：）