javascript - jQuery onclick 仅更改最近的 div 的 html

Question

我需要在同一页面上使用同一代码片段的多个实例。这是一个小型图像库，可根据单击的链接更改 div 中显示的图像。我一切正常，但是当单击要放置在 div 中的图像时，它会使用该类更改页面上的每个 div。我尝试使用 $(this).closest 但这似乎根本不起作用。我很接近吗？

<div class="gallery-carousel">
  <div class="galleryImageChange">
  </div>
</div>
<div class="icon-pager">
  <a href="#" class="imageNav"><img src="/img/logo.png"></a>
  <a href="#" class="imageNav"><img src="/img/logo.png"></a>
  <a href="#" class="imageNav"><img src="/img/logo.png"></a>
</div>

<div class="gallery-carousel">
  <div class="galleryImageChange">
  </div>
</div>
<div class="icon-pager">
  <a href="#" class="imageNav"><img src="/img/logo.png"></a>
  <a href="#" class="imageNav"><img src="/img/logo.png"></a>
  <a href="#" class="imageNav"><img src="/img/logo.png"></a>
</div>

$('a.imageNav').click(function() {
    var $content = $(this).html();
    $(this).closest('div.galleryImageChange').html($content);
    return false;
});

不幸的是，我必须使用此实例的多个实例，并且无法为每个实例使用单独的 ID。这是jsfiddle .

Answer 1

.closest will look for parent element of the current-element, as specified selector is not a parent of the element, nothing will be selected.

使用选择器作为$(this).closest('.icon-pager').prev('div.gallery-carousel').find('div.galleryImageChange')

$('a.imageNav').click(function() {
  var $content = $(this).html();
  $(this).closest('.icon-pager').prev('div.gallery-carousel').find('div.galleryImageChange').html($content);
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="gallery-carousel">
  <div class="galleryImageChange">
  </div>
</div>
<div class="icon-pager">
  <a href="#" class="imageNav">
    <img src="/img/logo.png">
  </a>
  <a href="#" class="imageNav">
    <img src="/img/logo.png">
  </a>
  <a href="#" class="imageNav">
    <img src="/img/logo.png">
  </a>
</div>

<div class="gallery-carousel">
  <div class="galleryImageChange">
  </div>
</div>
<div class="icon-pager">
  <a href="#" class="imageNav">
    <img src="/img/logo.png">
  </a>
  <a href="#" class="imageNav">
    <img src="/img/logo.png">
  </a>
  <a href="#" class="imageNav">
    <img src="/img/logo.png">
  </a>
</div>