0

编辑：每斯拉克斯

$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');
    }
});

原帖

我有一个横幅，可以旋转一系列三个图像。活动的有一个显示：块，而非活动的有一个显示：无。我正在尝试将活动图像的类与标签匹配，以便我可以将“活动”类添加到 a 标签。编写该函数时遇到了一些麻烦。它为每个 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); 
            }
        });
    }
});
4

1 回答 1

1

新问题的答案：

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

于 2010-03-21T16:04:42.220 回答