Question

.thumb-img的{{1}}应该等于最接近的src的{{1}}

.slider-img

src

Answer 1

我认为您有多个这样的img标签，在这种情况下，由于变量thumbimg始终是第一个img标签值，因此无法正常工作。

因为$('.thumb-img').closest('div').prev()将是img标签的集合，而.attr('src')总是会返回属性中第一个元素。

As per docs :

获取匹配元素集中第一个元素的属性值，或为每个匹配元素设置一个或多个属性。

为了解决此问题，您必须遍历元素，然后对每个元素分别进行相同的操作。因此，请使用each()方法来实现这一目标。

$(function imgsrc() {
  $('.thumb-img').each(function() {
    $(this).attr('src', $(this).closest('div')
      .prev()
      .attr('src'));
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <img class="slider-img" data-u="image" src="https://cdn-images-1.medium.com/max/1200/1*H-25KB7EbSHjv70HXrdl6w.png" />
  <div data-u="thumb">
    <img class="thumb-img" data-u="thumb" src="" />
    <div class="ti">Slide Description</div>
  </div>
</div>

或者，您可以将attr()方法与回调（内部迭代）作为第二个参数一起使用，在回调内获取父级同级元素的src属性（this引用当前元素）。

$(function imgsrc() {
  $('.thumb-img').attr('src', function() {
    return $(this).closest('div')
      .prev()
      .attr('src');
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <img class="slider-img" data-u="image" src="https://cdn-images-1.medium.com/max/1200/1*H-25KB7EbSHjv70HXrdl6w.png" />
  <div data-u="thumb">
    <img class="thumb-img" data-u="thumb" src="" />
    <div class="ti">Slide Description</div>
  </div>
</div>

更新：我刚刚检查了您的网站（如注释所示），其结构完全不同，因此您必须进行一些更改。获取包含slider-img类的img标记的祖先div，然后获取img标记及其src属性值。

$(function imgsrc() {
  $('.thumb-img').attr('src', function() {
    return $(this).closest('div:has(.slider-img)')
      .find('.slider-img')
      .attr('src');
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <img class="slider-img" data-u="image" src="https://cdn-images-1.medium.com/max/1200/1*H-25KB7EbSHjv70HXrdl6w.png" />
  <div data-u="thumb">
    <img class="thumb-img" data-u="thumb" src="" />
    <div class="ti">Slide Description</div>
  </div>
</div>

img src等于父级div的同级img src

1 个答案: