0

マルチステップの連絡先フォームを作成しています (各ステップは記事タグ内にあります)。jQuerymap()を使用してラベルと入力値を配列に格納し、フォームの最後の部分に情報を表示します。配列を格納するjQueryは次のようになります。

$("article:last").prev().find("a.next").on("click", function(){
    var arr = $('.form-item').map(function() {
        var lab = $('label', this).text();
        var val = $('input', this).val();
        return "<li>" + lab + " " + val + "</li>";
    }).get()

    $("article:last ul#results").append(arr.join(''))
});

これはうまく機能しますが、当然のことながら、テキストエリアと選択メニューに対して「未定義」を返します。選択したアイテムとテキストエリアで機能するように、このコードを調整する必要があります。私の HTML は次のように非常に単純です。

<article>
<div class="form-item">
    <label>Address:</label>
    <input type="text" />
</div>

<div class="form-item">
    <label>Message:</label>
    <textarea rows="2" cols="20"></textarea>
</div>
</article>

各記事は、フォームの新しいセクションを表します。問題は、他のフォーム要素をサポートするために jQuery をどのように適応させるかということです。.form-item「の子供にテキストエリアが含まれている場合、このコードを実行する....など」という条件付きの発言をするのは良い賭けでしょうか。

4

2 に答える 2

1

次のように書くことができます。

​var arr = $('.form-item').map(function() {
    var val = $(this).find('input, textarea').val();
    return val;
}).get();​​​​​​​​​​​

JSFiddleでの実際の例

于 2012-09-11T19:56:45.920 に答える
0

:eq()セレクターを使用eq(1)して、div タグの 2 番目の子、input または textarea 要素を選択できます。

var arr = $('.form-item').map(function() {
    var lab = $('label', this).text();
    var val = $(':eq(1)', this).val();
    return "<li>" + lab + " " + val + "</li>";
}).get()

http://jsfiddle.net/bFumx/

于 2012-09-11T19:47:28.397 に答える