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選擇倒數第二個子女

回答

相關問題