1

For a business website I'm trying to achieve the following: - A div with testimonials from clients. - A list with logos from those clients.

When the user hovers over a logo, the correct testimonial should be displayed in the div.

I've got the following markup:

<div id="testimonial-container"><div class="testimonial">Here comes a testimonial</div>
    <div class="testimonial">Here comes another testimonial</div>
    <div class="testimonial">And another one</div>
    <ul class="testimonial-logos">
       <li><a><img src="logo-1.jpg" /></a></li>
       <li><a><img src="logo-2.jpg" /></a></li>
       <li><a><img src="logo-3.jpg" /></a></li>
    </ul>
</div>

The hover effect will be done with CSS (opacity:0, and 1), so it isn't really a slider.

To add a class to the active testimonial, I use this code:

jQuery('#testimonial-container .testimonial-logos a').hover(function(){
    jQuery('#testimonial-container .testimonial, #testimonial-container .testimonial-logos a').addClass('active');
});

Any ideas how to switch the testimonials in the div? Thanks in advance!

4

4 に答える 4

1

I would give each of your testimonals an ID for example <div class"testimonial" id="logo-1.jpg"> then on the mouse over you logo it can find the correct testimonial and display it

于 2012-06-27T12:01:30.127 に答える
1

Assuming the testimonials are in the same order as the corresponding logos then something like this will work (place within a document ready handler or in a script block at the end of the body):

var $container = $("#testimonial-container"),
    $testimonials = $(".testimonial", $container).hide();

$(".testimonial-logos li", $container).hover(function() {
    $testimonials.eq( $(this).addClass("active").index() ).show();
}, function() {
    $testimonials.eq( $(this).removeClass("active").index() ).hide();
});

Demo: http://jsfiddle.net/YG5aV/3

This caches a jQuery object containing the testimonial divs, and immediately hides them all. Then within the hover handler, on mouse enter it shows the one corresponding to the logo being hovered and on mouse leave it hides it again.

UPDATE: If the intention is to do something only on mouse enter rather than mouse enter and leave then I'd suggest .mouseenter() rather than .hover() because the latter is a shortcut for assigning both an enter handler and a leave hander. The following does what you describe in the comment - note the .eq(0).mouseenter() on the end, which triggers the mouseenter for the first li element so that it will be the active one to start with.

var $container = $("#testimonial-container"),
    $testimonials = $(".testimonial", $container).hide(),
    $prev;

$(".testimonial-logos li", $container).mouseenter(function() {
    if ($prev)
       $testimonials.eq( $prev.removeClass("active").index() ).hide();
    $testimonials.eq( ($prev = $(this).addClass("active")).index() ).show();
}).eq(0).mouseenter();

Demo: http://jsfiddle.net/YG5aV/4/

于 2012-06-27T12:07:04.983 に答える
1

You can use the .index() and .eq() selectors to determine which link you hovered.

$('#testimonial-container .testimonial-logos a').hover(function(){
    var index = $('#testimonial-container .testimonial-logos a').index(this);
    $('#testimonial-container .testimonial, #testimonial-container .testimonial-logos a').removeClass('active');
    $('#testimonial-container .testimonial, #testimonial-container .testimonial-logos a').eq(index).addClass('active');
});

jsfiddle link: http://jsfiddle.net/8EgB4/

于 2012-06-27T12:11:24.983 に答える
0

You could get the ordinal of the hovered child using index and then access the related testimonial using the nth-child selector. The nth-child selector uses an ordinal, so you'd need to add 1 to the index value to get the correct testimonial. You would also need to make sure that you list your logos and testimonials in the same order.

于 2012-06-27T12:11:04.190 に答える