jquery question - addclass to element depending on active image in rotating banner

Posted by whitman6732 on Stack Overflow See other posts from Stack Overflow or by whitman6732
Published on 2010-03-21T15:55:53Z Indexed on 2010/03/21 16:01 UTC
Read the original article Hit count: 508

Filed under:
|
|
|

I have a banner that rotates a series of three images. The active one has a display:block, while the inactive have display:none. I'm trying to match the class for the active image with an tag so that I can add an "active" class to the a tag. Having some trouble writing that function. It's adding all of the classes for each of the img elements, regardless of whether they're being displayed or not...

The html markup looks like this:

<div id="banner-area">
    <div class="clearfix" id="promo-boxes-nav">
        <ul id="banner-tabs">
            <li>
                <ul id="page-tabs">
                    <li><a class="t39" href="#">1</a></li>
                    <li><a class="t42" href="#">2</a></li>
                    <li><a class="t49" href="#">3</a></li>                            
                </ul>
            </li>
            <li class="last">&nbsp;</li>
        </ul>
    </div>


    <div id="banner-content">
         <img class="t39" src="http://localhost:8888/1.png" style="position: absolute; top: 0px; left: 0px; display: none; opacity: 0;">                                            
         <img class="t42" src="http://localhost:8888/2.png" style="position: absolute; top: 0px; left: 0px; display: block; opacity: 1;">                                            
         <img class="t49" src="http://localhost:8888/3.png" style="position: absolute; top: 0px; left: 0px; display: none;opacity: 0;">                                        
    </div>
</div>

The function in its current form looks like this:

$j(document).ready(function() {
    $j('#banner-content')
    .cycle({ 
        fx:     'fade', 
        speed:   300, 
        timeout: 3000, 
        next:   '.t1', 
        pause:   1 
    });

    if($j('#page-tabs a').attr('class')) {
        $j('#banner-content img').each(function() {
            if($j(this).attr('display','block')) {
                var bcClass = $j(this).attr('class');
            }

            $j('#page-tabs li a').each(function() {
                if($j('#page-tabs li a').hasClass(bcClass)) {
                    $j(this).addClass(bcClass); 
                }
            });
        });
    }
})

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about addclass