Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Daniel Campbell
Daniel Campbell
10,148 Points

How to improve this script (DRY)

Hi Forum,

I'm integrating a jQuery script into WP theme and would like to know how to improve it. I'd like to make it into function and pass variables to the function instead of listing each instance in the CSS and javascript. The ideal solution would be to use one fixed div and pass the URL of the image through a hover script so that each image fades in/out on hover, and is replaced in the same DIV, but each image would not be suddenly cut-off by the next image suddenly appearing when the mouse hovers over another item which actives the fade in/out for another image. In short, exactly how it performs here (hover over the list of instruments):

http://visuel.org/XAMP/instrumentarium/

but with better programming (DRY).

The script is activated by hovering over text with the class show1, show2 etc... (the classes are not defined in the CSS as they have no style properties attached).

CSS

#show1, #show2, #show3, #show4, #show5, #show6, #show7 {
  position:fixed;
  top:0;
  right:0;
}

JAVASCRIPT

<script>

window.laytheme.on("newpageshown", function(layoutObj, type, obj) {
    jQuery("#show1").hide();
    jQuery("#show2").hide();
    jQuery("#show3").hide();
    jQuery("#show4").hide();
    jQuery("#show5").hide();
    jQuery("#show6").hide();
    jQuery("#show7").hide();

    jQuery(".show1").hover(function(){ jQuery("#show1").fadeToggle(); });
    jQuery(".show2").hover(function(){ jQuery("#show2").fadeToggle(); });
    jQuery(".show3").hover(function(){ jQuery("#show3").fadeToggle(); });
    jQuery(".show4").hover(function(){ jQuery("#show4").fadeToggle(); });
    jQuery(".show5").hover(function(){ jQuery("#show5").fadeToggle(); });
    jQuery(".show6").hover(function(){ jQuery("#show6").fadeToggle(); });
    jQuery(".show7").hover(function(){ jQuery("#show7").fadeToggle(); });
});

</script>
Vlad Legkowski
Vlad Legkowski
9,882 Points

Can you check if bellow would work.

A bit hard to do it 'blind' for me + have no clue about jQuery. If your site does not heavily rely on jQuery, you could achieve the required code in Pure JS pretty easily.

Thanks

const showsIds = ["#show1", "#show2", "#show3", "#show4", "#show5", "#show6", "#show7"];
const showsCls = [".show1", ".show2", ".show3", ".show4", ".show5", ".show6", ".show7"];
showsIds.forEach(id => document.querySelector(id).style.visibility = "hidden");
showsCls.forEach(cls => $(cls).hover(function() {
    $(cls).fadeToggle('slow');
  })
);