1

我有一个按预期工作的简单表格。这是一个多步骤表格，一次只显示一个问题。当用户点击一个输入字段（所有单选按钮）时，他们会被带到下一个问题，这取决于他们点击的内容，最后他们在最后一个问题之后得到一个提交按钮。
我目前有几个.click功能，而且效果很好。但是，我确信这不是最有效的方法，就写作和性能而言。有没有更有效的方法来使用多种.click功能？

$('.male').click(function() {
  $('#male').show();
  $('#gender').hide();
});

$('.female').click(function() {
  $('#female').show();
  $('#gender').hide();
});
4

4 回答 4

3

假设您的 HTML 具有逻辑结构，例如：

<form action="#" method="post">
    <fieldset>
        <legend>Question 1: gender</legend>
        <label for="m">Male</label>
        <input type="radio" name="gender" id="m" />
        <label for="f">Female</label>
        <input type="radio" name="gender" id="f" />
    </fieldset>
    <fieldset>
        <legend>Question title</legend>
        <!-- answer options -->
    </fieldset>
    <!-- other questions... -->
</form>

那么我能想到的最简单的选择如下：

$('form').on('click','input',
              function(){
                  var fieldset = $(this).closest('fieldset');
                  fieldset.fadeOut(500,
                      function(){
                          fieldset.next('fieldset').fadeIn(500);
                      });
              });​

​<a href="http://jsfiddle.net/davidThomas/sQW79/1/" rel="nofollow">JS Fiddle 演示。

为了允许重新审视以前的问题，我建议按照以下方式进行调整：

<form action="#" method="post">
    <fieldset>
        <legend>Question 1: gender</legend>
        <label for="m">Male</label>
        <input type="radio" name="gender" id="m" />
        <label for="f">Female</label>
        <input type="radio" name="gender" id="f" />
        <div class="controls">
            <a href="#" class="prev">Previous</a>
            <a href="#" class="next">Next</a>
        </div>
    </fieldset>
    <!-- other questions... -->
</form>

再加上jQuery：

$('fieldset').not($('fieldset:eq(0)')).hide();
$('.controls a.prev:first, .controls a.next:last').addClass('disabled');
$('form').on('click', 'input, a', function(e) {
    var target = e.target,
        targetType = target.tagName.toLowerCase(),
        targetClass = target.className,
        fieldset = $(this).closest('fieldset'),
        prev = fieldset.prev().length,
        next = fieldset.next().length;

    if (targetType == 'input' && next > 0) {
        fieldset.fadeOut(500, function() {
            fieldset.next('fieldset').fadeIn(500);
        });
    }
    else if (targetType == 'a') {
        if (targetClass == 'prev' && prev > 0) {
            fieldset.fadeOut(500, function() {
                fieldset.prev('fieldset').fadeIn(500);
            });
        }
        else if (targetClass == 'next' && next > 0) {
            fieldset.fadeOut(500, function() {
                fieldset.next('fieldset').fadeIn(500);
            });
        }
    }
});​

JS 小提琴演示。

参考：

  1. jQuery的东西：

  2. 原生 JavaScript 的东西：

于 2012-04-09T16:13:25.947 回答
1

由于事件冒泡，您可以这样做：

​$('body').on('click',function(e){
    switch ($(e.target).attr('class')){
        case "male":
            $('#male').show();
            $('#gender').hide();
            break;
        case "female":
            $('#female').show();
            $('#gender').hide();
            break;
        default:
            alert("default function!");
            break;            
    }
});​​​​​​

这是一个演示：http: //jsfiddle.net/748sE/2/

当然，默认功能将在您单击该页面上尚未捕获的任何内容上返回...

顺便说一句，您可以替换$(e.target).attr('class')为e.target.className优化它，就像大卫托马斯在他的回答中所做的那样......

于 2012-04-09T12:45:49.810 回答
0

因为您#male和#female元素都需要在单击它们时运行代码，所以它们都需要自己的单击处理程序。但是，您可以通过将它们都包含在同一个选择器中并调用单个函数来处理它们来简化此代码。试试这个：

$(".male, .female").click(showDivs);

function showDivs() {
    if ($(this).hasClass("male")) {
        $("#male").show();
    }
    else {
        $("#female").show();
    }
    $("#gender").hide();
}
于 2012-04-09T12:37:20.797 回答
0

您可以将所有问题归类为“问题”，然后每个答案都可以有一个对应于您要显示的即将到来的分支的类（或其他）属性的 id。

因此，每个响应都将包含接下来要为您显示的内容的名称，并且您将只能拥有一个单击处理程序。

IE：

$("input").click(function() {
    $(".question").hide();
    var itemToShow = $(this).attr("id");
    //alert(itemToShow);
    if ($("."+itemToShow).length > 0) {
        $("."+itemToShow).show("normal");
    } else {
        $(".finale").show("normal");
    }
});

您可能需要稍微尝试一下，直到控件按您的意愿工作。这是一个可以解决的问题。

更新：这是最新的小提琴演示。

于 2012-04-09T12:45:19.670 回答