Question

我需要你的帮助这段代码对我很好：

<div class="grauereihe">
    <div class="kleinesbild">
        <a data-lightbox="ags1" class="bildtopa" href="images/image1.jpg">
            <img class="bildtop" src="images/produkte/KHF/KHF-DN40-03-2.jpg" />
        </a>
    </div>
    <div class="infozeile">
        <div class="produkttext">
            <img class="kleinegalerie" src="images/image2.jpg" />
            <img class="kleinegalerie" src="images/image3.jpg" />
        </div>
    </div>
</div>


<script>
$('.produkttext img').on({
    'mouseover': function() {
        var images = $(this).attr('src');
        $('.bildtop').attr('src', images);
        $('.bildtopa').attr('href', images);
    }
});
</script>

但我需要这个代码不止一个.grauereihe，如：

<div class="grauereihe">
    <div class="kleinesbild">
        <a data-lightbox="lb1" class="bildtopa" href="images/image1.jpg">
            <img class="bildtop" src="images/image1.jpg" />
        </a>
    </div>
    <div class="infozeile">
        <div class="produkttext">
            <img class="kleinegalerie" src="images/image2.jpg" />
            <img class="kleinegalerie" src="images/image3.jpg" />
        </div>
    </div>
</div>

<div class="grauereihe2">
    <div class="kleinesbild">
        <a data-lightbox="lb1" class="bildtopa" href="images/image1.jpg">
            <img class="bildtop" src="images/image1.jpg" />
        </a>
    </div>
    <div class="infozeile">
        <div class="produkttext">
            <img class="kleinegalerie" src="images/image2.jpg" />
            <img class="kleinegalerie" src="images/image3.jpg" />
        </div>
    </div>
</div>

所以我想用最近的函数（或父级）替换src和href，但我无法让它工作。像：

<script>
$('.produkttext img').on({
    'mouseover': function() {
        var images = $(this).attr('src');
        $(this).closest('img').find('.bildtop').attr('src', images);
        $(this).closest('a').find('.bildtopa').attr('href', images);
    }
});
</script>

任何人都可以帮助我吗？感谢

Answer 1

要获得第一个祖先，您可以使用closest()方法。由于closest()方法为您提供了最接近的祖先，并且您要查找的元素不是祖先，您可以遍历最近的父元素，然后使用find()方法获取后代元素。 / p>

$('.produkttext img').on({
    'mouseover': function(){
        var images = $(this).attr('src');
        $(this).closest('.grauereihe').find('img.bildtop').attr('src', images);
        $(this).closest('.grauereihe').find('a.bildtopa').attr('href', images);
    }
});

Answer 2

尝试以下

还有一件事我可以看到你已经把课程grauereihe2请转换为grauereihe 将代码放入文档就绪是一种很好的做法。

<script>
$(document).ready(function(e) {
  $('.produkttext img').on({
    'mouseover': function(){
        var images = $(this).attr('src');
        var parent = $(this).closest('.grauereihe')
        parent.find('.bildtop').attr('src',images);
        parent.find('.bildtopa').attr('href',images);
    }
  });
});
</script>

jQuery最接近的具有特定类/ id的div

2 个答案: