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)
    });

这应该可行，但如果它增加了实际速度或任何东西......不确定。它真的不会删除任何行，因为你必须添加这个正则表达式插件...但如果将有更多的这些按钮，那么这个脚本应该比为所有按钮编写事件更动态。

Answer 4

有了这个，您可以添加新页面。

$("div").map(function() {
    var id_string,
    index,
    back_face,
    number_pattern,
    backface_pattern;
    id_string = $(this).attr('id');
    number_pattern = /\d+/;
    backface_pattern = /back$/gi;
    if (id_string.match(/.+-(\d+)-.+(-back)?$/gi) !== null) {
        index = parseInt(number_pattern.exec(id_string));
        if (backface_pattern.exec(id_string) === 'back') {
            $("#page-" + index.toString()).hide();
            $("#page-" + (index + 1).toString()).show();
        } else {
            $("#page-" + (index + 1).toString()).hide();
            $("#page-" + index.toString()).show();
        }
        $('html, body').animate({
            scrollTop: '0px'
        },
        300);
    }
});

这会使缩小版本（删除空格但仍然可读）的代码减少36.11％......

// in your javascript file...
$("div").map(function() {
  var id_string, index, back_face, number_pattern, backface_pattern;
  id_string = $(this).attr('id');
  number_pattern = /\d+/;
  backface_pattern = /back$/gi;
  if (id_string.match(/.+-(\d+)-.+(-back)?$/gi) !== null) {
    index = parseInt(number_pattern.exec(id_string));
    if (backface_pattern.exec(id_string) === 'back') {
      $("#page-" + index.toString()).hide();
      $("#page-" + (index + 1).toString()).show();
    } else {
      $("#page-" + (index + 1).toString()).hide();
      $("#page-" + index.toString()).show();
    }
    $('html, body').animate({scrollTop:'0px'},300);
  }
});

编辑：您不一定需要插件

这会使代码减少66.67％

Answer 5

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

你可以做休息

我该如何压缩这个功能？

5 个答案: