0

クラスのタグがいくつか<article>あり、クラスに基づいて特定の記事を表示および非表示にする2つのボタンがあります-しかし、機能しません

との 2 つのボタンがあります。それぞれが独自の対応するタグを表示する必要があります。クラスを持つタグは、ボタンをクリックすると表示される必要があり、同じことがボタンにも当てはまります。一部のタグには bot クラスがあるため、2 つのボタンのいずれかをクリックすると表示されるはずです。.latestClick.mostViewedClick<article><article>.latest.latestClick.mostViewedClick<article>

jQuery

$('#featuredToggle ul li a').click(function (e) {
    e.preventDefault();

    if ($(this).hasClass('latestClick')) {
        $('article .mostViewed').toggleClass('hideArticle');
        $('article .latest').toggleClass('showArticle');
    } else if ($(this).hasClass('mostViewedClick')) {
        $('article .latest').toggleClass('hideArticle');
        $('article .mostViewed').toggleClass('showArticle');
    }
});

HTML:

<div id="featuredToggle">
    <ul>
        <li><a class="latestClick" href="#">Latest</a>
        </li>
        <li><a class="mostViewedClick" href="#">Most Viewed</a>
        </li>
    </ul>
</div>
<div class="box_mini block feed">
    <article class="latest"> <a href="post.html"><img src="img/175x175.jpg" alt="" /></a>

        <div class="content">
             <h4><a href="post.html">SUV's</a></h4>

        </div>
    </article>
    <article class="mostViewed hideArticle"> <a href="post.html"><img src="img/175x175.jpg" alt="" /></a>

        <div class="content">
             <h4><a href="post.html">Bakkies</a></h4>

        </div>
    </article>
    <article class="latest mostViewed"> <a href="post.html"><img src="img/175x175.jpg" alt="" /></a>

        <div class="content">
             <h4><a href="post.html">Hatch Back</a></h4>

        </div>
    </article>
    <article class="latest mostViewed"> <a href="post.html"><img src="img/175x175.jpg" alt="" /></a>

        <div class="content">
             <h4><a href="post.html">Sedan</a></h4>

        </div>
    </article>
    <article class="latest"> <a href="post.html"><img src="img/175x175.jpg" alt="" /></a>

        <div class="content">
             <h4><a href="post.html">Coupe</a></h4>

        </div>
    </article>
</div>

CSS:

.hideArticle {
    display: none;
}
.showArticle {
    display: block;
}

ここで何が間違っていますか？

4

2 に答える 2

3 
$('article .mostViewed').toggleClass('hideArticle');
$('article .latest').toggleClass('showArticle');

セレクターに属していないスペースがあります。

$('article.mostViewed').toggleClass('hideArticle');
$('article.latest').toggleClass('showArticle');
于 2013-03-19T21:18:19.887 に答える
1

$('article .mostViewed')class を持つ子要素を持つ article タグを探していmostViewedます。mostViewed代わりにクラス of の記事タグを探していることを示すために、スペースを削除する必要があります。

それとは別に、トグルを使用すると、特に誰かが同じリンクをクリックし続けると、望ましくない効果が生じる可能性があります.

次のように、代わりにjQuery show() / hide()を使用してコードを大幅に簡素化できます。

$('#featuredToggle ul li a').click(function (e) {
    e.preventDefault();

    if ($(this).hasClass('latestClick')) {
        $('article.mostViewed').hide();
        $('article.latest').show();
    } else if ($(this).hasClass('mostViewedClick')) {
        $('article.latest').hide();
        $('article.mostViewed').show();
    }
});

そうすれば、同じリンクを繰り返しクリックしても、望ましくない結果が得られることはありません。

デモ-show()とのhide()

于 2013-03-19T21:26:53.590 に答える