jquery - jquery在鼠标悬停时每次更改img

Question

大家好，我正在尝试创建一个包含动态产品的网站，我想为每个 div 做一个鼠标悬停更改 img，这样它就可以用下面的 1 个小图片来改变大图。但是现在，一旦您将鼠标悬停在其中一张小图片上，所有大图片都会发生变化（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>

然后我做了一个小 jquery 每个我将在这里展示的函数：

$('.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);

            });

        });


    }

我希望我对自己的解释足够好，并且对我的问题有一些好的答案

标签： jquery

Answer 1

你在寻找这样的东西吗？...

$('.do_something').on('mouseenter', function() {
  var imagePath = 'https://i.imgur.com/'; // change your path to '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, body {
  margin: 0;
  padding: 0;
}
.do_something {
  cursor: pointer;
}
img.stortbillede {
  max-width: 100%;
}
.image-wrapper {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
}
.image-wrapper img {
  margin: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
  <div class="produkt">
    <h2>overskrift</h2>
    <img class="stortbillede" src="https://i.imgur.com/Wu4mf2zb.jpg">
    <div class="produkt_hidden">
      <p>Lorem ipsum dolor sit amet,</p>
      <div class="image-wrapper">
        <img class="lille_billede1 do_something" src="https://i.imgur.com/Wu4mf2zb.jpg"  alt="food">
        <img class="lille_billede2 do_something" src="https://i.imgur.com/NN36yEMb.jpg"  alt="food">
        <img class="lille_billede3 do_something" src="https://i.imgur.com/KDTD5wjb.jpg"  alt="food">
      </div>
    </div>
  </div>
  <div class="produkt">
    <h2>overskrift</h2>
    <img class="stortbillede" src="https://i.imgur.com/Wu4mf2zb.jpg">
    <div class="produkt_hidden">
      <p>Lorem ipsum dolor sit amet,</p>
      <div class="image-wrapper">
        <img class="lille_billede1 do_something" src="https://i.imgur.com/Wu4mf2zb.jpg"  alt="food">
        <img class="lille_billede2 do_something" src="https://i.imgur.com/NN36yEMb.jpg"  alt="food">
        <img class="lille_billede3 do_something" src="https://i.imgur.com/KDTD5wjb.jpg"  alt="food">
      </div>
    </div>
  </div>
</div>

小提琴

https://jsfiddle.net/Hastig/fgnyk92m/

信用

https://stackoverflow.com/a/2526089/3377049