jquery鼠标悬停时每次更改img

jquery鼠标悬停时每次更改img,jquery,Jquery,大家好,我正在尝试用动态产品制作一个站点,我想为每个div制作一个mouseover更改img,这样它就可以用下面的一个小图片来改变大图。但是现在,一旦你把鼠标放在一张小图片上,所有的大图片都会改变(stortbillede) 因此,我将在这里展示我的html模型: <div id="test"> <div class="produkt"> <h2>overskrift</h2> <img class

大家好,我正在尝试用动态产品制作一个站点,我想为每个div制作一个mouseover更改img,这样它就可以用下面的一个小图片来改变大图。但是现在,一旦你把鼠标放在一张小图片上,所有的大图片都会改变(stortbillede)

因此,我将在这里展示我的html模型:

<div id="test">
    <div class="produkt">
        <h2>overskrift</h2>
        <img class="stortbillede" src="image/20180509_122659.jpg">
        <div class="produkt_hidden">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque blanditiis cum, a velit accusantium autem possimus nulla praesentium consectetur eum non sed quae accusamus maxime et sunt modi repellat! Officiis.</p>


            <img class="lille_billede1 do_something" src="image/20180509_122710.jpg">
            <img class="lille_billede2 do_something" src="image/20180509_122219.jpg">
            <img class="lille_billede3 do_something" src="image/20180509_122548.jpg">


        </div>
    </div>
    <div class="produkt">
        <h2>overskrift</h2>
        <img class="stortbillede" src="image/20180509_122659.jpg">
        <div class="produkt_hidden">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque blanditiis cum, a velit accusantium autem possimus nulla praesentium consectetur eum non sed quae accusamus maxime et sunt modi repellat! Officiis.</p>


            <img class="lille_billede1 do_something" src="image/20180509_122710.jpg">
            <img class="lille_billede2 do_something" src="image/20180509_122219.jpg">
            <img class="lille_billede3 do_something" src="image/20180509_122548.jpg">


        </div>
    </div>
    <div class="produkt">
        <h2>overskrift</h2>
        <img class="stortbillede" src="image/20180509_122659.jpg">
        <div class="produkt_hidden">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque blanditiis cum, a velit accusantium autem possimus nulla praesentium consectetur eum non sed quae accusamus maxime et sunt modi repellat! Officiis.</p>


            <img class="lille_billede1 do_something" src="image/20180509_122710.jpg">
            <img class="lille_billede2 do_something" src="image/20180509_122219.jpg">
            <img class="lille_billede3 do_something" src="image/20180509_122548.jpg">


        </div>
    </div>
    <div class="produkt">
        <h2>overskrift</h2>
        <img class="stortbillede" src="image/20180509_122659.jpg">
        <div class="produkt_hidden">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque blanditiis cum, a velit accusantium autem possimus nulla praesentium consectetur eum non sed quae accusamus maxime et sunt modi repellat! Officiis.</p>


            <img class="lille_billede1 do_something" src="image/20180509_122710.jpg">
            <img class="lille_billede2 do_something" src="image/20180509_122219.jpg">
            <img class="lille_billede3 do_something" src="image/20180509_122548.jpg">


        </div>
    </div>
</div>

我希望我对自己的解释足够好,我的问题有一些好的答案,你是在找这样的东西吗

$('.do_something').on('mouseenter',function(){
var-imagePathhttps://i.imgur.com/“;//将路径更改为“image/”
var imageSource=$(this.attr('src');
var imagePathAndFilename=imageSource.lastIndexOf(“/”)+1;
var imageFilename=imageSource.substr(imagePathAndFilename);
$(this).closest('.produkt').find('.stortbillede').attr('src',imagePath+imageFilename);
})
html,正文{
保证金:0;
填充:0;
}
.做点什么{
光标:指针;
}
斯托比勒德{
最大宽度:100%;
}
.图像包装器{
显示器:flex;
对正内容:空间均匀;
宽度:100%;
}
.图像包装器img{
保证金:2倍;
}

过度夸耀
Lorem ipsum dolor sit amet

过度夸耀 Lorem ipsum dolor sit amet


请参见下面代码的可运行重构。这些图像不会显示,但你可以使用flickr

$('.do_something').mouseenter(函数(){
var biledenavn=$(this.attr(“src”);
$(this).parent('.produkt_hidden')。parent('.produkt')。children('img')。attr('src',biledenavn);
});

过度夸耀
Lorem ipsum dolor sit amet,奉献精英。这是一种无需履行义务的、不需要最大限度地履行义务和义务的责任!官员

过度夸耀 Lorem ipsum dolor sit amet,奉献精英。这是一种无需履行义务的、不需要最大限度地履行义务和义务的责任!官员

过度夸耀 Lorem ipsum dolor sit amet,奉献精英。这是一种无需履行义务的、不需要最大限度地履行义务和义务的责任!官员

过度夸耀 Lorem ipsum dolor sit amet,奉献精英。这是一种无需履行义务的、不需要最大限度地履行义务和义务的责任!官员


你发LOL的速度快了几秒钟。@pfx我很惊讶在我写自己的:D时竟然没有发5个答案
$('.produkt').find('.do_something').each(function() {

            $('.do_something').mouseenter(function() {

                var billedenavn = $(this).attr("src");

                $('img').parent('.produkt_hidden').parent('.produkt').children('img').attr('src', billedenavn);

            });

        });


    }