Question

我有一些带有类的<article>标签，以及两个按钮，根据他们的类显示和隐藏某些文章 - 但它不起作用

有两个按钮：.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;
}

我在这里做错了什么？

Answer 1

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

您的选择器中有一个不属于的空间。

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

Answer 2

$('article .mostViewed')正在寻找带有子元素的文章标记，该元素具有类mostViewed。您需要删除该空格，以表明您正在寻找类别为mostViewed的文章标记。

除此之外，使用切换可能会产生不良影响，特别是当有人不断点击相同的链接时。

您可以使用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();
    }
});

通过重复点击同一链接，您也无法获得不良后果。

DEMO - 使用show()和hide()

切换类的Onclick功能不起作用

2 个答案: