jQuery的显示隐藏多个div按钮

Question

我需要开发一个“新闻”页面，其中包含3个可以通过2个按钮隐藏或逐个显示的文章：“显示更多新闻”和“显示较少新闻”每个文章只能通过单击相关按钮来隐藏/显示从最后一篇文章（在底部）开始到第一篇文章（在页面顶部）一次。 HTML：

<!-- Articles-->
<article id="art-1" class="row" >My first Art</article>
<article id="art-2" class="row art" >My second Art</article>
<article id="art-3" class="row art" >My last Art</article>

<!--Buttons-->
<button class="button-grey" id="show-less-news1">Show Less</button>
<button class="button-grey" id="show-less-news2">Show Less</button>
<button class="button-grey" id="show-less-news3">Show Less</button>
<button class="button-grey" id="show-more-news1">Show More</button>
<button class="button-grey" id="show-more-news2">Show More</button>
<button class="button-grey" id="show-more-news3">Show More</button>

我设法通过JQuery做到了这一点，但是代码非常冗长，我需要6个按钮而不是2个按钮，但是我相信必须有一种更简单的方法来使用不太复杂的代码来获得相同的结果。 这是JQuery代码：

$("#show-more-news1").css({display:'none'});
$("#show-more-news2").css({display:'none'});
$("#show-more-news3").css({display:'none'});
$("#show-less-news1").css({display:'none'});
$("#show-less-news2").css({display:'none'});
    //function 1 less
$("#show-less-news3").click(function(){
$("#art-3").hide(400);
$("#show-less-news3").hide();
$("#show-more-news3").show();
$("#show-less-news2").show();
});
    //function 2 less
$("#show-less-news2").click(function(){
$("#art-2").hide(400);
$("#show-less-news2").hide();
$("#show-more-news3").hide();
$("#show-less-news1").show();
$("#show-more-news2").show();
});
    //function 3 more
$("#show-more-news3").click(function(){
$("#art-3").show(400);
$("#show-more-news3").hide();
$("#show-less-news2").hide();
$("#show-less-news3").show();
});
    //function 3 less
$("#show-less-news1").click(function(){
$("#art-1").hide(400);
$("#show-less-news1").hide();
$("#show-more-news2").hide();
$("#show-more-news1").show();
});
    //function 2 more
$("#show-more-news2").click(function(){
$("#art-2").show(400);
$("#show-more-news2").hide();
$("#show-less-news1").hide();
$("#show-less-news2").show();
$("#show-more-news3").show();
});
    //function 1 more
$("#show-more-news1").click(function(){
$("#art-1").show(400);
$("#show-more-news1").hide();
$("#show-less-news1").show();
$("#show-more-news2").show();
});

一些CSS：

  article {
  position: realtive;
  width: 100%;
  height: 50px;
  border: 1px solid red;
  float:left;
  background-color: yellow;
}
.button-grey {
  display: block;
  background-color: #cfcfcf;
  width: 150px;
  height: 30px;
  float:right;
}

这是一个CodePen 。 有人可以通过更好的代码帮助我获得相同的结果吗？ 非常感谢！

Answer 1

在这个jsfiddle中，我有一个更好的版本。

HTML：

<!-- Articles-->
<div id="articles">
<article id="art-1" class="row">My first Art</article>
<article id="art-2" class="row art">My second Art</article>
<article id="art-3" class="row art">My last Art</article>
</div>

<!--Buttons-->
<button class="button-grey" id="show-less">Show Less</button>
<button class="button-grey" id="show-more" style="display: none">Show More</button>

JS：

    var allArticles = $('#articles article');
var visibleCount = 3;

$('#show-less').on('click', function() {
    // no more articles to hide
    if (visibleCount == 0) return;
    // hide the previous one
    $(allArticles[--visibleCount]).hide();

    // Show the more button
    $('#show-more').show();
    // hide the less button
    if (visibleCount == 0)
        $('#show-less').hide();
});

$('#show-more').on('click', function() {
    if (visibleCount == allArticles.length) return;
    // show the next article
    $(allArticles[visibleCount++]).show();

    // Show the less button
    $('#show-less').show();
    // hide the more button
    if (visibleCount == allArticles.length)
        $('#show-more').hide();
});

Answer 2

仅使用两个按钮和相同的CSS来使用HTML以下JS对我来说更好：

Javascript:


var newsDepth = 3;
var maxNewsDepth = 3;

$('#show-more-news').hide();


$('#show-more-news').click( function () {
  (newsDepth < maxNewsDepth ) && newsDepth++;
  $('#art-' + newsDepth).show();
  $('#show-less-news').show();
  if (newsDepth == maxNewsDepth) $('#show-more-news').hide();
});

$('#show-less-news').click( function () {
  ( newsDepth > 1 ) && newsDepth--;
  $('#art-' + (newsDepth + 1)).hide();
  $('#show-more-news').show();
   if (newsDepth == 1) $('#show-less-news').hide();
});

的HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Articles-->
<article id="art-1" class="row">My first Art</article>
<article id="art-2" class="row art">My second Art</article>
<article id="art-3" class="row art">My last Art</article>

<!--Buttons-->
<button class="button-grey" id="show-less-news">Show Less</button>
<button class="button-grey" id="show-more-news">Show More</button>

这是给你的codepen