Help in refactoring the jquery code

6
$(".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 more images without ever repeating the same. link here is my site, that white border appears around the images, how can I get it out?

    
asked by João Pedro 03.12.2015 в 13:44
source

4 answers

3

You can use a property data-* to store the image selector, so just have a bind for all 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><imgclass="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 can 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 have also made this modification, finally, instead of editing the style / css inline, 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>
    
answered by 03.12.2015 / 13:57
source
3

You are using more than one class to do the same thing, the class is used to pick up several elements and do the same thing as opposed to the id that is unique on the page. You do not need to create multiple classes for what you want to do, just one. follows 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', "");

  });
    
answered by 03.12.2015 в 14:00
1

Assuming HTML is the same as your new question you can do so, without having to change the 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: link

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

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

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

jsFiddle: link

    
answered by 03.12.2015 в 20:02
0

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 Javascript Minifer site or another similar one to minify your file, here the example of code above:

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");
    
answered by 03.12.2015 в 14:30