1

基本的に出発都市のテキスト入力フィールドと戻りテキストの入力フィールドを提供するフォームでオートコンプリート ウィジェットを使用しています。

1 つの div で Depart From と Arrive At を表示し、2 番目の div で同じになる戻り情報を表示したいと思います。(つまり、トロントを出発してバリーに向かい、バリーからトロントに戻ります)。

私のjQueryは初めて情報を表示するためにうまく機能していますが、情報を逆に表示することはできません。

私のフォーム：（表示部分のみ）

<div class="ui-widget">
    <p>
        <label for="tags">Depart From:</label>
        <input type="text" class="departCity" id="tags" size="30" />
    </p>
</div>
<div class="ui-widget">
    <p>
        <label for="tags2">To:</label>
        <input type="text" class="destination" id="tags2" size="30" />
    </p>
</div>

私のコードは次のとおりです。

$(function() {
    $('input[type="text"]').blur(function() {
        $("#" + $(this).attr('id') + "_display").html($(this).val());
    });
});​

そしてhtml：

<div id="trip">
    <p><strong><span id="tags_display"></span> - <span id="tags2_display"></span></strong></p>
</div>
<div id="returnTrip">
    <p><strong><span id="displayTags2"></span></strong></p>
</div>

私が言ったように、「旅行」divの最初の部分は正常に表示されますが、2番目に複製/複製したいと思います。

これと他のいくつかのバリエーションを試しましたが、もう一度表示することはできません。私のフォームデータはどこにも行きません。表示されるだけです。

function open() {
    $('#displayTags2').html($('#tags2_display').clone());
}
open();​

助けてくれてありがとう。

4

2 に答える 2

1

あなたが持っているコピー機能を呼び出す方法が必要です（あなたが呼んだものopen()）。

旅行をリストに追加するボタンを作成できます。

HTML

<div class="ui-widget">
    <p>
        <label for="tags">Depart From:</label>
        <input type="text" class="departCity" id="tags" size="30" />
    </p>
</div>

<div class="ui-widget">
    <p>
        <label for="tags2">To:</label>
        <input type="text" class="destination" id="tags2" size="30" />
    </p>
</div>

<div id="trip">
    <p><strong><span id="tags_display"></span> - <span id="tags2_display"></span></strong></p> 
</div>

<button class="copyTrip">Copy trip</button>

<div id="returnTrip">
    <p><strong><span id="displayTags2"></span></strong></p>
</div>
​

Javascript

$(function() {
    $('.copyTrip').on('click', function open() {
        $('#displayTags2').append($('#trip').clone());
    });

    $('input[type="text"]').on('change', function() {
        $("#" + $(this).attr('id') + "_display").html($(this).val());
    });
});​

デモ

編集 1

宛先の値をコピーして、非表示の div に入れたいだけですか? 簡単。

$('#tags2').val()変更されるたびにコピーし、returnTrip帰りのチェックボックスがチェックされていない限り、divを非表示にします。

Javascript

$(function() {

    $('input[type="text"]').on('change', function() {
        $("#" + $(this).attr('id') + "_display").html($(this).val());
        $('#displayTags2').html($('#tags2').val());
    });

});​

デモ

于 2012-11-27T01:54:13.653 に答える
0

私があなたの質問を本当に理解しているなら、おそらくあなたは次のようなことを意味しています：あなたのメソッドopen()であなたの関数を呼び出してください。blur()

$(function() {
    $('input[type="text"]').blur(function() {
        $("#" + $(this).attr('id') + "_display").html($(this).val());
        //update immediately the Return city in the container
        open();
    });
});​
于 2012-11-27T01:49:49.070 に答える