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

元の投稿

一連の3つの画像を回転させるバナーがあります。アクティブなものには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); 
            }
        });
    }
});
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 に答える