如何压缩此函数？

Question

我有这个功能，当我点击一个按钮时，另一个div将被显示，另一个div将被隐藏。代码是有效的，但它是草率的。有没有什么好办法来缩短函数的使用时间？

$(document).ready(function(){
    $("#page-1-button").click(function(){
        $("#page-2").css('display','inline');
        $("#page-1").css('display','none');
        $('html, body').animate({scrollTop:'0px'},300)
    });

    $("#page-2-button").click(function(){
        $("#page-3").css('display','inline');
        $("#page-2").css('display','none');
        $('html, body').animate({scrollTop:'0px'},300)
    });

    $("#page-2-button-back").click(function() {
        $("#page-1").css('display','inline');
        $("#page-2").css('display','none');
        $('html, body').animate({scrollTop:'0px'},300)
    });

    $("#page-3-button-back").click(function(){
        $("#page-2").css('display','inline');
        $("#page-3").css('display','none');
        $('html, body').animate({scrollTop:'0px'},300)
    })
});



<div id="page-1"> <input id="page-1-button" /> </div>
<div id="page-2"> <input id="page-2-button" /> <input id="page-2-button-back" /> </div>
<div id="page-3> <input id="page-3-button-back" /> </div>

Answer 1

根据您的HTML，您可能希望查看与按钮相关的元素的操作：

不知道你的HTML结构，我猜：

$(".button").click(function(){
        $(this).closest('.page').show();
        $(this).next('.page').hide();
...etc...
})

这样，使用类名和相对DOM位置的所有元素都可以使用相同的代码，而不需要为每个ID进行特定的调用。

Answer 2

一个想法

function showHideControls(div1, div2){
   $(div1).show();
   $(div2).hide();
   $('html, body').animate({scrollTop:'0px'},300); 

  }
$("#page-1-button").click(function(){  
    showHideControls('#page2','#page1');
});  

$("#page-2-button").click(function(){  
        });  

$("#page-2-button-back").click(function() {  

});  

$("#page-3-button-back").click(function(){  
        })

Answer 3

安装这个jquery插件：http://james.padolsey.com/javascript/regex-selector-for-jquery/

然后：

$(':regex(id,^page-[0-9]-button$)').click(function(){
        var n = parseInt($(this).attr('id').split('-')[1];)
        $("#page-"+(n+1).toString()).css('display','inline');
        $("#page-"+n).css('display','none');
        $('html, body').animate({scrollTop:'0px'},300)
    });

    $(':regex(id,^page-[0-9]-button-back$)').click(function() {
        var n = parseInt($(this).attr('id').split('-')[1];)
        $("#page-"+(n-1).toString()).css('display','inline');
        $("#page-"+n).css('display','none');
        $('html, body').animate({scrollTop:'0px'},300)
    });

这应该是可行的，但如果它增加了实际的速度或任何东西...这一点不太确定。它并没有删除任何行，因为您必须添加这个regexp插件……但是如果有更多这样的按钮，那么这个脚本应该比必须为所有按钮编写事件更具动态性。