CODEWITHSUNDEEP
javascriptjqueryhtml
McLemore
McLemore

Reputation: 625

How do I simplify the following code?

So I have a selection of images and would like a div to appear on('hover'). My current code is very bulky and manually adds that div for each of the images.

 $("#TheNook").hover(function() {
$("#TheNook-cover").toggleClass("hidden");
});

$("#TheNook-cover").hover(function() {
    $("#TheNook-cover").toggleClass("hidden");
});

$("#ManCave").hover(function() {
    $("#ManCave-cover").toggleClass("hidden");
});

$("#ManCave-cover").hover(function() {
    $("#ManCave-cover").toggleClass("hidden");
});

$("#AnchorsAweigh").hover(function() {
    $("#AnchorsAweigh-cover").toggleClass("hidden");
});

$("#AnchorsAweigh-cover").hover(function() {
    $("#AnchorsAweigh-cover").toggleClass("hidden");
});

$('#BatCave').hover(function() {
    $('#BatCave-cover').toggleClass('hidden');
});

$('#BatCave-cover').hover(function() {
    $('#BatCave-cover').toggleClass('hidden');
});

$('#CountryChic').hover(function() {
    $('#CountryChic-cover').toggleClass('hidden');
});

$('#CountryChic-cover').hover(function() {
    $('#CountryChic-cover').toggleClass('hidden');
});

$('#BohemianBungalow').hover(function() {
    $('#BohemianBungalow-cover').toggleClass('hidden');
});

 $('#BohemianBungalow-cover').hover(function() {
     $('#BohemianBungalow-cover').toggleClass('hidden');
 });

My new solution that I have tried is much more condensed, but I'm not entirely sure how to make it work. I'm new to declaring and using variables in JQuery so please help.

var cover = $('.theme-img:hover').attr("alt");

$('.theme-img').hover(function() {
    $('#'+cover+'-cover').toggleClass('hidden');
});

Here is a JSFiddle: https://jsfiddle.net/w6pbp4Lz/2/

The first image should behave like the second.

Upvotes: 1

Views: 63

Answers (3)

fbid
fbid

Reputation: 1570

You can use this code in order to achieve that:

JQUERY:

$('img.theme-img').hover(function() {
  $(this).parent().children('div').toggleClass('hidden');
});

Here is your JSfiddle with my edits: https://jsfiddle.net/w6pbp4Lz/6/

Upvotes: 1

Scott Schwalbe
Scott Schwalbe

Reputation: 430

function toggleHover(srcElements, tarElement) {
  srcElements.forEach(function(srcElement) {
    srcElement.hover(function() {
      tarElement.toggleClass('hidden');
    });
  });
}

call toggle hover with an array of the jQuery elements and the target jQuery element to toggle hidden. example

toggleHover([$('#TheNook'), $('#TheNook-cover')], $('#TheNook-cover'));

just an idea, might clean the code up a bit

Upvotes: 0

100pic
100pic

Reputation: 387

Assuming they all have the class "theme-img" this might work

// "var cover = $('.theme-img:hover').attr("alt"); (not needed)

$('.theme-img').hover(function() {
    $(this).toggleClass('hidden');
});

Upvotes: 0

Related Questions