javascript - 如何查找图像列表中下一个图像的src

Question

我有这样的图像库代码

<div id="panel">
   <div id="img-grp-wrap">
       <div class="img-wrap">
            <img id="largeImage" src="images/1_large.jpg" />
            <div id="description">1st image description</div>
       </div>

       <img src="arrowright.jpg" class="next" alt="Next"/> 
       <img src="arrowleft.jpg" class="prev" alt="Previous"/>

   </div>
</div>

<div id="thumbs" class="content mThumbnailScroller">
<ul>
   <li><img src="images/ind_thumb.jpg" alt="1st image description" /></li>
   <li><img src="images/pak_thumb.jpg" alt="2nd image description" /></li>
   <li><img src="images/sl_thumb.jpg" alt="3rd image description" /></li>
   <li><img src="images/nz_thumb.jpg" alt="4th image description" /></li>
   <li><img src="images/ban_thumb.jpg" alt="5th image description" /></li>
   <li><img src="images/uae_thumb.jpg" alt="6th image description" /></li>
   <li><img src="images/sa_thumb.jpg" alt="7th image description" /></li>
</ul>
</div>

JavaScript 代码为

$('.next').click(function() {
    var curr = $('#largeImage').attr('src');
    curr = curr.replace('large','thumb');

    var next = $('#thumbs li').next('img[src=' + curr + ']').attr('id');
    alert(next);

});

if curr value is "images/ban_thumb.jpg". so i want to alert next value to be

“images/uae_thumb.jpg”即下一个图像src和当前的上一个img src相同。

Answer 1

这些将找到下一个和上一个图像源。请注意，您需要为 src 属性加上引号，因为它有斜杠:

$('.next').click(function() {
  var curr = $('#largeImage').attr('src');
  curr = curr.replace('large','thumb');

  var next = $('img[src="' + curr +'"]')
              .parent('li')
              .next()
              .find('img').attr('src');
  alert(next);
});

$('.prev').click(function() {
  var curr = $('#largeImage').attr('src');
  curr = curr.replace('large','thumb');

  var prev = $('img[src="' + curr + '"]')
              .parent('li')
              .prev()
              .find('img').attr('src');
  alert(prev);
});