JavaScript/jQuery code optimization

Question

I'm learning JavaScript and jQuery and currently I'm dealing with following code:

  $("#hrefBlur0").hover(function() {
    $("#imgBlur0").toggleClass("blur frame");
  });
  $("#hrefBlur1").hover(function() {
    $("#imgBlur1").toggleClass("blur frame");
  });
  $("#hrefBlur2").hover(function() {
    $("#imgBlur2").toggleClass("blur frame");
  });
  $("#hrefBlur3").hover(function() {
    $("#imgBlur3").toggleClass("blur frame");
  });
  $("#hrefBlur4").hover(function() {
    $("#imgBlur4").toggleClass("blur frame");
  });
  $("#hrefBlur5").hover(function() {
    $("#imgBlur5").toggleClass("blur frame");
  });
  $("#hrefBlur6").hover(function() {
    $("#imgBlur6").toggleClass("blur frame");
  });
  $("#hrefBlur7").hover(function() {
    $("#imgBlur7").toggleClass("blur frame");
  });

The code is supposed to remove blur effect from an image while I hoover a cursor on a href link on the website. I'm wondering if I can do it faster, with fewer lines of code. I tried:

  for (var i = 0; i < 8; i++) {
    $("#hrefBlur" + i).hover(function() {
      $("#imgBlur" + i).toggleClass("blur frame");
    });
  }

But that code doesn't work.

Here's the JS fiddle: link

We need to see your HTML to see how the #hrefX elements relate to the #imgX elements, as I'm sure it's possible to simplify this using DOM traversal and no ugly concatenated selectors in a loop — Rory McCrossan
– Rory McCrossan, Commented Sep 12, 2017 at 9:51
@RoryMcCrossan here's the JS fiddle I created. The code is supposed to make a navbar jsfiddle — Lukasz
– Lukasz, Commented Sep 12, 2017 at 10:09

Sycraw · Accepted Answer · 2017-09-12 10:00:30Z

You can set a class to the elements and select that class, for example let's say you want to use "blurMeContainer" for the container, you can do something like this:

$(".blurMeContainer").hover(function(el){
$(this).find("img").toggleClass("blur frame");
});

The trick is that you must be aware that jQuery applies the events to the element, so inside the events function, the "this" accessor is the element involved in the event, than you can use the $ function in the selector in order to have his corrispective jQuery element, and then you can use "find" method to find any img tag inside the jQuery element. Obviously this could work only if you have a single image in the container, if you need to identify only one image in a set of images inside a single container, assign a class to that image (IE: "blurMe") and change the code in this way:

    $(".blurMeContainer").hover(function(el){
$(this).find(".blurMe").toggleClass("blur frame");
});

Govind Samrow · Accepted Answer · 2017-09-12 10:45:14Z

0

Use attributeStartsWith selector , that Selects elements that have the specified attribute with a value beginning exactly with a given string:

$('a[id^="hrefBlur"]').hover(function() {
    $(this).find('img').toggleClass("blur frame");
});

Here's working fiddle

edited Sep 12, 2017 at 10:45

answered Sep 12, 2017 at 10:36

Govind Samrow

10.2k14 gold badges59 silver badges90 bronze badges

Comments

Keith · Accepted Answer · 2017-09-13 10:34:56Z

Although doing what your after can be done with JQuery. I personally think it's the wrong tool for the Job.

CSS, will do all this for you, in a much simpler way. No Javascript needed. With the added benefit of the browser optimisations.

.blurme {
  filter: blur(3px);
  cursor: pointer;
  transition: color 2s, filter 1s;
}

.blurme:hover { 
  filter: none;
  color: red;  
  font-weight: bold;
}

<span class="blurme">One</span>
<span class="blurme">Two</span>
<span class="blurme">Three</span>
<span class="blurme">Four</span>
<span class="blurme">Five</span>
<span class="blurme">Six</span>
<br>

<img class="blurme" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg">
<img class="blurme" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg">
<img class="blurme" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg">

Collectives™ on Stack Overflow

JavaScript/jQuery code optimization

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related