CODEWITHSUNDEEP
jquery
user2535507
user2535507

Reputation: 13

jQuery - Select divs within a class individually

I am somewhat new to web design, but I feel like I mostly know what I am doing. I have several divs, all of class .picture that are grouped with text that is inside a .description div. I am using jQuery so that when a user mouses over one of the pictures within the .picture divs, the text assigned to that specific picture will fade into view. I know that I can give each div an id and individually access them in jQuery, but could I do something, such as a loop, that would allow me to call .mouseenter() and .mouseleave() only once, but still animate all of the divs? Should I group each pair of img and p into another div?

HTML:

<div class="picture" id="pic1"><img src="DSCI0003.jpg"/ height="400"></div><div class="description"><p>Gus</p></div><br/><!--Insert pictures of board members. Specify only height of width! -->
<div class="picture" id="pic2"><img src="DSCI0003.jpg"/ height="400"></div><div class="description"><p>Gus</p></div><br/>
<div class="picture" id="pic3"><img src="DSCI0003.jpg"/ height="400"></div><div class="description"><p>Gus</p></div><br/>

Upvotes: 1

Views: 144

Answers (3)

nnnnnn
nnnnnn

Reputation: 150010

You can do this:

$("div.picture").mouseenter(function() {
    $(this).next().fadeIn();
}).mouseleave(function() {
    $(this).next().fadeOut();
});

This binds mouse enter and mouse leave event handlers to all "div.picture" items. Within the event handlers, this refers to the individual item that the mouse moved over, and then .next() gets the element after it - in your case the description div.

Demo: http://jsfiddle.net/j83Dd/

Or you can do this with just CSS, no JavaScript, by using the :hover pseudo-class together with the adjacent sibling + selector:

div.description {
    display : none;
}
div.picture:hover + div.description {
    display : block;
}

Demo: http://jsfiddle.net/j83Dd/1/

Oops, forgot the fade on the CSS solution:

div.description {
    opacity : 0;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}
div.picture:hover + div.description {
    opacity : 1;
}

Demo: http://jsfiddle.net/j83Dd/2/

All of the above depend on your existing html structure.

"Should I group each pair of img and p into another div?"

It seems to me you could probably group the img and the p into a single div, rather than having both in their own divs as well as adding a container div around the lot. In my opinion it kind of makes sense to group them with a div because that makes it clear that they belong together, but you don't have to...

Upvotes: 2

Marcin Krawiec
Marcin Krawiec

Reputation: 713

If you do not want your javascript to rely on the html structure you can change the html into this:

<div class="picture" id="pic1"><img src="DSCI0003.jpg"/ height="400"></div><div class="description" data-pic-id="pic1"><p>Gus</p></div><br/><!--Insert pictures of board members. Specify only height of width! -->
<div class="picture" id="pic2"><img src="DSCI0003.jpg"/ height="400"></div><div class="description" data-pic-id="pic2"><p>Gus</p></div><br/>
<div class="picture" id="pic3"><img src="DSCI0003.jpg"/ height="400"></div><div class="description" data-pic-id="pic3"><p>Gus</p></div><br/>

I've added new attributes to the .description divs: data-pic-id which contains the same value as the id of corresponding .picture.

This will allow you to prepare javascript that will be separated from the html structure:

$('.picture').mouseenter( function() {
    var id = $(this).attr('id');
    $('[data-pic-id="'+id+'"]').fadeIn();
});

Upvotes: 0

Surreal Dreams
Surreal Dreams

Reputation: 26380

You can write a generic .mouseenter() function to handle this situation because of the structure of the HTML. Because the relevant .description div is always immediately after the .picture div, you can access the relevant description with $(this).next("div.description p");. You can read the text with the .text() method, or use an animation to make the div.description visible.

The .mouseleave() function can be similar, hiding the relevant text. Alternately, you can hide all the description texts with the :visible selector. Sometimes it's nice to be precise, and sometimes it's nice to be simple. See what fits with your design.

Upvotes: 0

Related Questions