Question

这里有一位好成员帮我创建了一个表单，可以随时添加步骤。我修改了一下，允许您通过单击更改按钮更改其中一些问题的答案。当然，我意识到了自己的极限并将其应用于第一个问题，而且非常...... 我接近这个的方式是给每个问题并按下它自己唯一的ID，我认为这可能是错误的方法来解决这个问题？

这就是我想要的，我部分完成了一些：

填写字段，按NEXT
字段1变为只读文本，出现ChangeButton
下方会显示一个新字段，您可以填写
通过按字段1上的CHANGE，field2变为不可编辑，field1现在可编辑。更改按钮也变为“保存”。单击“保存”，可以使字段2可编辑，而字段1不可再编辑。
这将永远持续下去：）

我尝试了我在互联网上找到的东西，但我希望有更好的人可以帮我解决一下，如果可以的话:) 这是我的Jfiddle http://jsfiddle.net/pufamuf/TEyVL/3/

谢谢！

Answer 1

Example of the following here

以下是我如何完成你想要做的事情......

<强> HTML：

<div id="question1" class="question active">
    <label>Q1</label>
    <input type="text" />
    <input type="button" value="SAVE" class="button" />
</div>

<强> jQuery的：

var qa = []; // questions array of objects { text: "question text" }

$('.button').live('click', function(e) {
    var $but = $(this),
        $inp = $but.prev(),
        $parent = $but.parent(),
        i = $parent.attr('id').match(/\d+$/)[0] - 1,
        $new;

    if ($but.val() == 'SAVE') {

        // store value to array
        qa[i] = {
            text: $inp.val()
        };

        // append new question inputs if needed
        if (!$('#question' + (i + 2)).length) {
            $new = $parent.clone();
            $new.attr('id', 'question' + (i + 2));
            $new.find('label').html('Q' + (i + 2));
            $new.find('input[type="text"]').val('');
            $new.insertAfter($parent);
        }

        // change to inactive attributes
        $inp.attr('disabled', true);
        $parent.removeClass('active').addClass('answered');
        $but.val('CHANGE');

    } else { // CHANGE

        // change to active attributes
        $inp.attr('disabled', false);
        $parent.removeClass('answered').addClass('active');
        $but.val('SAVE');

    }
});

我创建了数组存储对象，因此如果需要，可以很容易地为每个问题添加其他属性。

See demo

某种数组可以创建多个Step Form吗？

1 个答案: