jquery each change img on mouseover

Question

Hello Everyone im trying to make a site with dynamic products, and i want to make a mouseover change img for each div, so that it change the big picture out with 1 of the small pictures under. however for now once you put your mouseover one of the small pictures all of the big images change (stortbillede)

so im going to show my html mockup here:

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

and then i made a little jquery each function that i wil show down here:

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

            });

        });


    }

i hope i explained myself good enough and for some good answer´s on my question

Hastig Zusammenstellen · Answer 1 · 2018-05-29T00:49:22.917

Are you looking for something like this?..

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

fiddle

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

credit

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

@pfx I was surprised there weren't 5 answers posted while I wrote my own :D — Hastig Zusammenstellen, May 28 '18 at 21:00

score 0 · Answer 2 · answered May 28 '18 at 20:56

See runnable refactor of your code below. The images won't show, but you will it a flickr

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

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

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

            });

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

jquery each change img on mouseover

2 Answers2