Jquery选择倒数第二个子女

使用Jquery构建灯箱时发生了一件有趣的事情。我设置了左右箭头按钮来移动列表，以便在最后一个孩子右箭头按钮从第一个孩子或第一个孩子开始，左箭头按钮移动到最后一个孩子。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(); 
});

来源

2015-10-05 John Coolidge

更新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');

来源

2015-10-05 17:23:16 bonesbrigade

我知道，我需要干的编程工作。但是，除此之外，image.attr（'href'）实际上与image.attr（'src'）完全相同。哪一个在哪里并不重要。在我所做的修订中，我改变了它，以便它在现在说src的地方说，所以当看着它时，人们不会看到它，并说“就这样，这是你的问题”。无论如何，我仍然遇到同样的问题。 –

@JohnCoolidge只是帮助调试，因为在Firefox中，图像不会使用'href'更改。我已经更新了问题的其余部分。 – bonesbrigade

我不是故意听起来像我不感激你的帮助。我做。我是JS和Jquery的新手，所以我需要了解很多关于DRY编程的知识。我会尽量把它们结合起来，但是我想在我摆弄太多之前先让它工作。 –

Jquery选择倒数第二个子女

回答

相关问题