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会查找current-element的父元素，因为指定的选择器不是element的父元素，所以不会选择任何内容。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

像这样更改HTML

def count(num):
    return sum(map(len, num))

jQuery onclick仅更改最接近div的html

2 个答案: