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

Answer 2

您可以使用：

$("input:button").on("click", function () {
var $this = $(this);
var parentId = $this.parent().attr("id");
switch (parentId) {
    case "p1":
        $('.to1').slideToggle();
        break;

    case "p2":
        $this.hasClass("goto1") ? $('.to1').slideToggle() : $('.to2').slideToggle()
        break;

    case "p3":
        $('.to2').slideToggle();
        break;

}

}）;

和html：

<div id="p1" class="to1">
<input class="goto2" type="button" value="next" />
 </div>
 <div id="p2" class="to1 to2">
<input class="goto1" type="button" value="prev" />
<input class="goto3" type="button" value="next" />
 </div>
 <div id="p3" class="to2">
<input class="goto2" type="button" value="prev" />
 </div>

这是小提琴：http://jsfiddle.net/5y28h75w/9/

Jquery页面/表单步骤与切换？

2 个答案: