小编use*_*712的帖子

jquery通过id显示/隐藏多个元素

我有 3 个段落和 2 个按钮,分别是下一个/上一个。在初始加载时,用户只能看到第一段和下一个按钮,除非他在第 2 段,否则在最后一段上将有下一个和上一个按钮,并且只有上一个按钮。这总结了我所做的事情。

除了后退按钮之外,我的代码工作正常,但我真正追求的是一种更干净/更好的方法来完成同样的事情。

我的html在这里:

<p id="page-1" class="ui-bottom-article">
blah blah blah 1
<p id="page-2" class="ui-bottom-article">
blah blah blah 2
</p>
<p id="page-3" class="ui-bottom-article">
blah blah blah 3
</p>

<a id="rd_bk" href="">back</a><a id="rd_more" href="">Read more...</a>
Run Code Online (Sandbox Code Playgroud)

我的剧本

$(function() {

     var pageNumber = 1;
         $('p.ui-bottom-article').hide();
         $('#page-1').show();
         $('#rd_bk').hide();



    $('#rd_more, #rd_bk').click(function(e){
        e.preventDefault();

     if(pageNumber == 1){
         $('p.ui-bottom-article').hide();
         $('#page-2').show();
          $('#rd_bk').show();
        pageNumber++;

        }else if(pageNumber == 2){
         $('p.ui-bottom-article').hide();
         $('#page-3').show();
         $('#rd_more').hide();
         $('#rd_bk').show();

        }else if(pageNumber == 3){
         $('p.ui-bottom-article').hide();
         $('#page-1').show();
         $('#rd_more').hide();
        pageNumber--;
        }

    }//end of if statement
    );//end …
Run Code Online (Sandbox Code Playgroud)

jquery click show hide

2
推荐指数
1
解决办法
2万
查看次数

标签 统计

click ×1

hide ×1

jquery ×1

show ×1