JQuery вопрос - добавить класс к элементу в зависимости от активного изображения во вращающемся баннере - PullRequest
Новая
       17

JQuery вопрос - добавить класс к элементу в зависимости от активного изображения во вращающемся баннере

0 голосов
/ 21 марта 2010

РЕДАКТИРОВАТЬ: Per Slaks 

$j('#banner-content img').each(function() {
    var link = $j('#page-tabs li a.' + $j(this).attr('class'));

    if ($j(this).is(':visible')) {
        link.addClass('active');
    } else {
        link.removeClass('active');
    }
});

ОРИГИНАЛЬНАЯ ПОЧТА

У меня есть баннер, который вращает серию из трех изображений. Активный имеет display: block, а неактивный - display: none. Я пытаюсь сопоставить класс для активного изображения с тегом, чтобы я мог добавить «активный» класс к тегу. Возникли проблемы при написании этой функции. Он добавляет все классы для каждого из элементов img, независимо от того, отображаются они или нет ...

HTML-разметка выглядит следующим образом: 

<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>

Функция в ее текущем виде выглядит так: 

$j('#banner-content img').each(function() {
    if($j(this).css('display','inline')) {
        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); 
            }
        });
    }
});

1 Ответ

1 голос
/ 21 марта 2010

Ответ на новый вопрос:

$j(this).show() покажет элемент.
Вы имеете в виду 

if($j(this).is(':visible'))

Кроме того, в ваших селекторах вы хотите написать $j(this), а не $j('#banner-content img:visible').

Наконец, код будет легче читать, если вы создадите отдельную переменную для хранения элемента <a>, например: 

var link = $j('#page-tabs li a.' + $j(this).attr('class'));

if ($j(this).is(':visible'))
    link.addClass('active');
else
    link.removeClass('active');

Ответ на старый вопрос:

Ваша проблема в том, что вы звоните hasClass по всем ссылкам внутри внутреннего each вызова. Это проверит, имеет ли любой элементов этот класс, а не только текущий.
Вам нужно изменить его на if($j(this).hasClass(bcClass)).

Однако ваш код излишне сложен, и его можно написать гораздо проще: 

 $j('#page-tabs a.' 
        + $j('#banner-content img:visible').attr('class'))
     .addClass('active);

Этот код вызывает $j('#banner-content img:visible').attr, чтобы найти класс видимого элемента <img>, а затем помещает класс непосредственно в селектор jQuery.

Обратите внимание, что вы, вероятно, также хотите позвонить removeClass.

...