Question

我正在使用backbone.js创建一个简单的向导。

在向导中，我有2个文本框，一个下拉菜单和2个按钮。表单元素一次显示一个，我使用.hide()/.show()隐藏或显示元素。

我希望用户能够使用2个按钮向前和向后导航，但我无法弄清楚如何以简单有效的方式对.show()/.hide()逻辑进行编码。

这是我的简单形式：

<div id="titleDiv" class="control">
    <label for="title">Title:</label>
    <input type="text" />
</div>

<div id="choicesDiv" class="control" style="display: none;">
    <label for="choices">Choices:</label>
    <input type="text" />
</div>

<div id="typeDiv" class="control" style="display: none;">
    <label for="types">Types:</label>
    <select name="type">
        <option>red</option>
        <option>blue</option>
        <option>green</option>
    </select>
</div>

<div id="directionControl">       
    <input type="button" class="prev" value="Prev" /> 
    <input type="button" class="next" value="Next" />
</div>

这是相关的js / jquery：

events: {
    'click .next': 'saveProceedNext',
    'click .prev': 'ProceedPrev'
},

saveProceedNext: function() {
    this.model.save();    //save before moving to the next input
    this.$('.control').hide();    //hide current
    this.$('#choicesDiv').show(); //show the next one...how to reference this without

有什么想法吗？ }，

    ProceedPrev: function() {
    }

Answer 1

试试这个：

$(document).ready(function () {
    $(".next").click(function () {
       // your save function here
       $('.control').hide();
       $('#choicesDiv').show();
    });
});

Answer 2

我认为这就是你要找的东西：

events: {
    'click .next': 'saveProceedNext',
    'click .prev': 'ProceedPrev'
},

currentStep: 0,

saveProceedNext: function() {
    this.model.save(); //save before moving to the next input
    if (this.currentStep < 2) {
        var steps = this.$('.control');
        $(steps[this.currentStep]).hide(); // hide current
        this.currentStep++;
        $(steps[this.currentStep]).show(); // show next
    } else {
        // handle submit
    }
},

ProceedPrev: function() {
    var steps = this.$('.control');
    if (currentStep > 0) {
        $(steps[this.currentStep]).hide(); // hide current
        this.currentStep--;
        $(steps[this.currentStep]).show(); // show previous
    }
}

Answer 3

您可以存储对活动元素的引用，并在.prev( [selector ] )和.next( [selector ] )

的帮助下遍历其兄弟姐妹

像这样的东西，例如

var V = Backbone.View.extend({
    events: {
        'click .next': 'saveProceedNext',
        'click .prev': 'ProceedPrev'
    },

    initialize: function() {
        this.active = this.$('.control').filter(':visible');
    },
    saveProceedNext: function(e) {
        e.preventDefault();
        this.model.save();

        var el = this.active.next('.control');
        if (!el.length)
            el = this.$('.control:first');

        this.activate(el);
    },
    ProceedPrev: function(e) {
        e.preventDefault();

        var el = this.active.prev('.control');
        if (!el.length)
            el = this.$('.control:last');

        this.activate(el);
    },
    activate: function(el) {
        this.active.hide();
        this.active = el;
        this.active.show();
    }
});

假设您的控件被表单包围，

var v = new V({
    el: 'form'
});

演示http://jsfiddle.net/nikoshr/9m3vf/

使用jquery在表单元素之间导航

3 个答案: