使用jquery在表單元素之間導航

我使用backbone.js來創建一個簡單的嚮導。使用jquery在表單元素之間導航

在嚮導中，我有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() { 
    }

來源

2014-01-07 SkyeBoniwell

我認爲這是你在找什麼：

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 
    } 
}

來源

2014-01-07 17:05:15

我得到這個錯誤：TypeError：steps [this.currentStep] .hide不是一個函數...不知道爲什麼，因爲我用[]應該告訴它它是一個數組 – SkyeBoniwell

我修正了我的例子。 TypeError是因爲訪問jQuery對象的特定索引會刪除jQuery包裝器。只需要用$（steps [this.currentStep]）重新應用包裝。 –

試試這個：

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

來源

2014-01-07 16:57:18 user2718671

這基本上就是我已經有了。 – SkyeBoniwell

所以它沒有工作？ – user2718671

那麼該部分已經工作，我的問題是，如何編寫按鈕邏輯，以便用戶可以在3個表單元素之間來回導航。 – SkyeBoniwell

你可以存儲通過有源元件和週期參考其兄弟姐妹藉助.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/

來源

2014-01-07 17:25:38 nikoshr

使用jquery在表單元素之間導航

回答

相關問題