Help in refactoring jquery code

Question

$(".img1").mouseenter(function() {
    $(this).css('box-shadow', "inset 0 0 20px black"); 
});

$(".img1").mouseout(function(){
    $(this).css('box-shadow', "");
});

$(".img2").mouseenter(function() {
    $(this).css('box-shadow', "inset 0 0 20px black");  
});

$(".img2").mouseout(function(){
    $(this).css('box-shadow', "");
});

$(".h2").mouseenter(function(){
    $('.img2').css("box-shadow","inset 0 0 20px black");
});

$(".h2").mouseout(function(){
    $('.img2').css("box-shadow", '');
});

$(".h1").mouseenter(function(){
    $('.img1').css("box-shadow","inset 0 0 20px black");
});

HTML

<div class="box first">
  <div >
    <img class="img1" />
  </div>
  <a href="t1.html"><h3 class="h1"> Aliens </h3></a>
  <div>
    <p></p>
  </div>
</div>
<div class="box second">
  <div>
    <img class="img2" />
  </div>
  <a href="a2.html"><h3 class="h2"> Day of the Dead </h3></a>
  <p></p>
</div>
<div class="box third">
  <div>
    <img class="img3" />
  </div>
  <a href="a3.html"><h3 class="h3"> Evil dead </h3></a>
  <p></p>
</div>

How do I make this code shorter to give for more images without always repeating the same. http://omeufilme.esy.es/teste2.html Here’s my site, there’s that white border around the images, how do I get it out?

Answer 1

you can use a property data-* to store the image selector, then just have a bind for all the elements.

var images = $("[data-img]");
images.mouseenter(function() {
  $(this.dataset.img).css('box-shadow', "inset 0 0 20px black"); 

});

images.mouseout(function(){
  $(this.dataset.img).css('box-shadow', "");
});

img {
  height: 240px;
  width: 240px;
  border: 1px solid black;
}

h1 {
  float: left;
  margin-right: 5px;
  width: 240px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img class="img1" data-img=".img1" />
<img class="img2" data-img=".img2" />
<h1 class="h1" data-img=".img1" >Image 01</h1>
<h1 class="h2" data-img=".img2" >Image 02</h1>

If you prefer, you may not use jQuery, follow the same code with Vanilla Javascript. It also seems to me that you are using classes where Ids would be ideal, so I also made this modification, finally, instead of editing the inline style/css, I am adding/removing a class to apply the shadow.

var images = document.querySelectorAll("[data-img]");

var onImgMouseEnter = function (event) {
  var img = document.getElementById(event.target.dataset.img);
  img.classList.add("sombra");
};

var onImgMouseOut = function (event) {
  var img = document.getElementById(event.target.dataset.img);
  img.classList.remove("sombra");
};
    
[].forEach.call(images, function (image, indice) {  
  image.addEventListener("mouseenter", onImgMouseEnter);
  image.addEventListener("mouseout", onImgMouseOut);
});

img {
  height: 240px;
  width: 240px;
  border: 1px solid black;
}

h1 {
  float: left;
  margin-right: 5px;
  width: 240px;
  border: 1px solid black;
}

.sombra {
  box-shadow: inset 0 0 20px black
}

<img id="img1" data-img="img1" />
<img id="img2" data-img="img2" />
<h1 id="h1" data-img="img1" >Image 01</h1>
<h1 id="h2" data-img="img2" >Image 02</h1>

Answer 2

You are using more than one class to do the same thing, the class is used to pick up various elements and do the same thing unlike the id that is unique on the page. You don’t need to create multiple classes for what you want to do, just one. Follow the example: HTML :

<h2 class="elements">Titulo</h1>
<img src="img1.jpg" class="elements" >
<img src="img2.jpg" class="elements" >

jQuery

$(".elements").mouseenter(function() {
   $(this).css('box-shadow', "inset 0 0 20px black"); 
  });

$(".elements").mouseout(function(){

     $(this).css('box-shadow', "");

  });

Answer 3

To compress this code, you can do the following:

function eventInElement(elEvent, elCSS, evento) {
      $(elEvent).on(evento, function() {
           elCSS = (elCSS == null) ? this : elCSS;
           if (evento == 'mouseenter') {
              $(elCSS).css("box-shadow","inset 0 0 20px black");
           } else {
              $(elCSS).css("box-shadow","");
           }
      });
}

eventInElement('.img1,.img2', null, 'mouseenter');
eventInElement('.img1,.img2', null, 'mouseout');
eventInElement('.h2', '.img2', 'mouseenter');
eventInElement('.h1', '.img1', 'mouseenter');

You can use the website Javascript Minifer or other similar to minify your file, here the example of the above code:

function eventInElement(e,n,t){$(e).on(t,function(){n=null==n?this:n,"mouseenter"==t?$(n).css("box-shadow","inset 0 0 20px black"):$(n).css("box-shadow","")})}eventInElement(".img1,.img2",null,"mouseenter"),eventInElement(".img1,.img2",null,"mouseout"),eventInElement(".h2",".img2","mouseenter"),eventInElement(".h1",".img1","mouseenter");

Answer 4

Assuming HTML matches your new question you can do so without having to change HTML:

$('.box').on('mouseenter mouseout', 'img, h3', function (e) {
  var shadow = e.type == 'mouseenter' ? 'inset 0 0 20px black' : '';
  $(this).closest('.box').find('img').css('box-shadow', shadow);
});

jsFiddle: http://jsfiddle.net/zg33wh7h/

This is not necessarily the fastest way, as it depends on jQuery, but is the most compressed.

But the best way can only be with CSS. Less code, faster. In that case you can do so by listening to the mouse throughout the .box:

.box:hover img {
  box-shadow: inset 0 0 20px black
}

jsFiddle: http://jsfiddle.net/zg33wh7h/1/