0

I will need to replicate this functionality for multiple elements on the page, I can achieve it by repeating the function and changing the class name, but is there a simpler way to combine multiple instances or change the class name? In the style sheet I am animating the title of each image when the link is rolled over.

The Function:

 $("a.link1").hover(function() {
  $(".img1, .img1over").toggleClass("img1 img1over");
});
$("a.link2").hover(function() {
  $(".img2, .img2over").toggleClass("img2 img2over");
});

the HTML:

<div id="nav">
<ul>
<li><a href="#" class="link1">link1</a></li>
<li><a href="#" class="link2">link2</a></li>

</ul>
</div>

            <div class="main">
                <div class="grid img1">
                    <img src="1.jpg" />
                    <div class="mask">
                        <h2>title</h2>
                    </div>
                    </div>

                    <div class="grid img2">
                    <img src="1.jpg" />
                    <div class="mask">
                        <h2>title</h2>
                    </div>
                    </div>

        </div>

4 Answers 4

1

First you would need a common class for all your links to simplify your code.

The HTML

<div id="nav">
<ul>
    <li><a href="#" class="link" id="link1">link1</a></li>
    <li><a href="#" class="link" id="link2">link2</a></li>
</ul>
</div>
<div class="main">
                <div class="grid img1">
                    <img src="1.jpg" />
                    <div class="mask">
                        <h2>title</h2>
                    </div>
                    </div>

                    <div class="grid img2">
                    <img src="1.jpg" />
                    <div class="mask">
                        <h2>title</h2>
                    </div>
                 </div>
 </div>

The function

$('.link').hover(function() {
    var id = $(this)[0].id.substring(4);
    $(".img"+id).toggleClass("img"+id+" img"+id+"over");
});

Now you can any number of link using a link class and an id link+number and they will refer to the corresponding img+number.

0

If you make certain class/id combinations correspond then you can write it once:

<a href="#" id="link1" class="hover-link">yep</a>
....
<div id="link1-container">
...
<img src="" class="link-image" />
...
</div> 

$('.hover-link').hover(function(e){
   var $this = $(this),
       baseId = $this.attr('id'),
       $img = $('#'+baseId+'-container .link-image');

       if($img.length > 0) {
          $img.toggleClass('the-class-name');
       }
});
0

I'd probably head this way:

$("#nav a").hover(function() {
    var num = $(this).attr('class').replace('link', '');
    // OR
    // var num = parseInt($(this).attr('class'), 10);

    $(".img" + num).toggleClass("img" + num + "over");
});​

I know you are toggling the img class as well, but I'd suggest reworking your css instead. You could also work off the index of the parent <li/> instead of clearing out the class name

0

It is really a strange case, but if you want to stick to your HTML and way of doing this - I would make a simple plugin for that.

http://jsfiddle.net/hkdobrev/8NS89/1/

$.fn.toggleHoverClass = function( selector1, selector2 ){
    return this.hover(function(){
        var index = $( this ).parent().index() + 1,
            class1 = selector1 + index,
            class2 = class1 + selector2;
        $( '.' + class1 + ', .' + class2 ).toggleClass(class1 + ' ' + class2);
    });
};

$(function(){
    $( '#nav' ).find( 'a.link' ).toggleHoverClass( 'img', 'over' );
});

​If you have any questions, please ask in the comments :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.