带切换功能的 Jquery 页面/表单步骤？

Question

我想一步一步创建一个简单的表单/页面，而不使用已经煮熟的插件。 为此，我这样做了，效果很好。

HTML

<div id="p1">
  <input class="goto2" type="button" value="next" />    
</div>

<div id="p2">
  <input class="goto1" type="button" value="prev" />
  <input class="goto3" type="button" value="next" />    
</div>

<div id="p3">
  <input class="goto2" type="button" value="prev" />
</div>

CSS

#p2, #p3 {
   display: none;
}

JS

$(".goto1").click(function() {
  $('#p2').hide('slow');
  $('#p1').show('slow');
});

$(".goto2").click(function() {
  $('#p1').hide('slow');
  $('#p3').hide('slow');
  $('#p2').show('slow');
});

$(".goto3").click(function() {
  $('#p2').hide('slow');
  $('#p3').show('slow');
});

我想用更清晰的代码来做到这一点，也许使用切换功能？是否可以？谢谢

JSFIDDLE

Answer 1

我只是检查元素是否具有特定的类:

$("input:button").on("click", function () {
    if ($(this).hasClass("goto1")) {
        $('#p2').hide('slow');
        $('#p1').show('slow');
    } else if ($(this).hasClass("goto2")) {
        $('#p1, #p3').hide('slow');
        $('#p2').show('slow');
    } else {
        $('#p2').hide('slow');
        $('#p3').show('slow');
    }
});

fiddle