How can I make multiple divs work in roll-out status with Jquery?

Question

How can I make multiple divs work in roll-out status with Jquery?

Navigation

#1 by (1 votes)

1

Good, I need to know how to make this Java Script code more optimized, it works for me so far. I have Divs with class "item" and images inside. The only thing I do is change the attribute when they are in mouse over and out, but I need help to know how to make it optimal. Thank you. I have this HTML code:

<div class="item1">
   <img id="im1" src="img/image1.png">
</div>

<div class="item2">
   <img id="im2" src="img/image2.png">
</div>

<div class="item3">
   <img id="im3" src="img/image3.png">
</div>

<div class="item4">
   <img id="im4" src="img/image4.png">
</div>

And I have this Java Script code

$("#item1").mouseover(function(){
    $('#im1').attr("src", "img/image1_over.png");
});

$("#item1").mouseout(function(){
   $('#im1').attr("src", "img/image1.png");
});

$("#item2").mouseover(function(){
    $('#im2').attr("src", "img/image2_over.png");
});

$("#item2").mouseout(function(){
   $('#im2').attr("src", "img/image2.png");
});

$("#item3").mouseover(function(){
    $('#im3').attr("src", "img/image3_over.png");
});

$("#item3").mouseout(function(){
   $('#im3').attr("src", "img/image3.png");
});

$("#item4").mouseover(function(){
    $('#im4').attr("src", "img/image4_over.png");
});

$("#item4").mouseout(function(){
   $('#im4').attr("src", "img/image4.png");
});

javascript jquery html funciones

asked by Andrés Fabián Paipa Camargo 30.03.2017 в 17:31

source

1 answer

Read Excel file with PHP Pass value from one combobox to another label of another form in visual basic

score 1 · Answer 1

If you know the total count of the elements you can do the following

$(document).ready(function() {

  let images = {
    normal: 'https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg',
    over: 'https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg'
  };

  for (var i = 1; i < 5; i++) {
    const div = $('.item' + i);
    const img = $('#im' + i);
    div.mouseover(function() {
      img.attr("src", images.over);
    });

    div.mouseout(function() {
      img.attr("src", images.normal);
    });
  }

});

img {
  width: 100px;
}

div {
  width: 100px;
  border: 1px solid black;
  padding: 5px 5px 5px 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item1">
  <img id="im1" src="https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg" />
</div>

<div class="item2">
  <img id="im2" src="https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg" />
</div>

<div class="item3">
  <img id="im3" src="https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg" />
</div>

<div class="item4">
  <img id="im4" src="https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg" />
</div>

If you do not know the total count of elements you can do a each but you must contain the elements in a div parent, example:

$(document).ready(function() {

  let images = {
    normal: 'https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg',
    over: 'https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg'
  };

  $('div[class^=item]').each(function(i, e) {
    const div = $(this);
    const img = $(this).find('img');
    div.mouseover(function() {
      img.attr("src", images.over);
    });

    div.mouseout(function() {
      img.attr("src", images.normal);
    });
  })

});

img {
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item1">
  <img id="im1" src="https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg" />
</div>

<div class="item2">
  <img id="im2" src="https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg" />
</div>

<div class="item3">
  <img id="im3" src="https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg" />
</div>

<div class="item4">
  <img id="im4" src="https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg" />
</div>

<div class="item5">
  <img id="im5" src="https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg" />
</div>

<div class="item6">
  <img id="im6" src="https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg" />
</div>