jquery :gt问题..试着展示更多

Question

我正在尝试在一个网站上有一个新闻区域..每一项都包含在其自己的名为.newsitem的div类中。我希望能够单击.showmorenews以显示其他项目。我做错了什么？我搞不懂，而且我对jquery也是相当陌生。谢谢!

$(document).ready(function(){
    var remixnewsshow = 2;
    remixnewsshow--; //fix variable since the index for :gt starts at 0
    $(".newsitem:gt(" + remixnewsshow + ")").hide();
    $(".showmorenews").click(function () {
        remixnewsshow++;
        $(".newsitem:gt(" + remixnewsshow + ")").show(); 
    });
});

html：

                <div class="box-news">
                    <h3>Recent News</h3>
                    <div class="newsitem">
                        <span class="month">Jan</span>
                        <span class="day">16</span>
                        <span class="news">Text text text</span>
                    </div>
                    <div class="newsitem">
                        <span class="month">Jan</span>
                        <span class="day">2</span>
                        <span class="news">Text text text</span>
                    </div>
                    <div class="newsitem">
                        <span class="month">Oct</span>
                        <span class="day">3</span>
                        <span class="news">Text Text Text</span>
                    </div>
                    <div class="showmorenews"><a href="#blank">View Another News Item</a></div>
                </div>

Answer 1

我认为您要找的实际上是将第二个gt更改为eq

 $(".showmorenews").click(function () {
        remixnewsshow++;
        $(".newsitem:eq(" + remixnewsshow + ")").show(); 
    });

你所做的事情的问题是，你最初显示的是2个元素，然后当单击时，你会显示所有大于2的元素，这就是所有剩余的元素。您只想显示下一个单个元素。