Search jQuery

jQuery Forum

Changing caption text on image

in Using jQuery • 7 years ago

In my website I have some jQuery that changes two images where if a user hovers over the image it will change to another. At the same time the caption underneath the image is also meant to change. I use one piece of jQuery to change the images and I want to be able to change the caption depending on which image the user is hovered over without having to add separate id's or classes to the images and target these with separate bits of jQuery.

See the fiddle here:

https://jsfiddle.net/SandmanNZ123/rszqqx9w/24/

Any help would be greatly appreciated.

Thanks

Replies(8)

jakecigar

Re: Changing caption text on image

7 years ago

https://jsfiddle.net/rszqqx9w/25/

var first_p, first_p_txt;
$('.fader').hover(function () { // inside here, never refer to .fader again!!!
first_p = $(this).find("p:first"),
first_p_txt = first_p.text();
$(this).find('div:eq(1)').stop(true, true).fadeIn();
$(this).find('div:eq(1)').css({
'top': '0',
'width': '100%',
});
//console.log(first_p_txt);
first_p.text("Not all gardens start off beautiful! It does take some work");
}, function () {
$(this).find('div:eq(1)').hide();
first_p.text(first_p_txt);;
});

I also added

"use strict"

so you can use undeclared variables!

JΛ̊KE

a.swanink

Re: Re: Changing caption text on image

7 years ago

Thanks Jake

I was wanting different captions for each of the images though when you hover over them. With the solution you have the caption is the same on each. How would you go about having a different caption for each image when you hover over each respective image?

Thanks

jakecigar

Re: Changing caption text on image

7 years ago

I wouldn’t do anything like that. I would use CSS alone. If you want to use jQuery you need to put an extra <p> or just use the alt text in each <img>.

JΛ̊KE

jakecigar