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

            });

        });


    }

我希望我能够很好地解释自己并在我的问题上得到一些好的答案

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

<强>拨弄

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

<强>信用

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

Answer 2

请参阅下面代码的runnable重构。这些图片不会显示，但你会成为一个flickr

＆＃13;

     $('.do_something').mouseenter(function() {

                var billedenavn = $(this).attr("src");

                $(this).parent('.produkt_hidden').parent('.produkt').children('img').attr('src', billedenavn);

            });

＆＃13;

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

＆＃13;

jquery每次在mouseover上改变img

2 个答案: