Как сгустить эту функцию?

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

Таким образом, этот же код может работать для всех элементов, используя cl задние имена и относительные позиции DOM, не требуя конкретного вызова для каждого идентификатора.

Answer 2

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

вы можете сделать для отдыха

Answer 3

Одна мысль

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 4

Установите этот 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 ... Но если будет много других таких кнопок, тогда этот скрипт должен быть более динамичным, чем писать события для всех кнопок.

Answer 5

С помощью этого вы можете добавить новые страницы.

$("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); 
    } 
}); 

EDIT: И вам не обязательно нужен плагин

Это сокращает код с помощью whooping 66.67%