0

左側にいくつかの入力値があります (入力パネルと呼びましょう)。addbutton がクリックされると、これらの入力値が右側のサイドバーの bluebox という div に追加されます

ここに上記の jsfiddle があります: jsfiddle

ここで、ユーザーが div の 1 つをクリックして、追加された入力値を編集し、変更を保持できるようにしたいと考えています。入力が入力パネルに再び表示されることを好みますが、「変更を保存/保持する」ボタンを使用するよりも

私はこれを行ういくつかの方法を考えましたが、初心者なのでひどく間違っている可能性があります;):

例 1

  • 次のように、ブルーボックスの div クラスをクリック可能にします。$(".bluebox").click(function(){}

  • .html を使用する代わりに、入力パネルの値をそれぞれの入力ラベルに追加する必要があります

私の目標の解決策として何を提案しますか? そして、なぜ私の例が機能するか失敗するのでしょうか?

事前にどうもありがとうございました！

4

3 に答える 3

2

保存ボタン、クリックされたブルーボックスを追跡する非表示の blueboxid div、および変更をより簡単に説明できるように (また、内容が読みやすくなるように) もう少しモジュール化された設計を追加することをお勧めします。

ここに完成した jsfiddle がありますhttp://jsfiddle.net/s6Yxz/26/ :)

于 2012-06-19T20:52:37.080 に答える
1

いくつかの一般的なアイデア - 次のように bluebox div にデータを追加できます。

$('<div>').addClass('bluebox').data({ field1: field1.val(), /* field 2 etc.. */ });

次に、次のような値を取得します。

$('.bluebox').click(function() {
  field1.val( $(this).data('field1') );
  // field 2 etc..
});

または、ブルーボックス内にスパンの構造を作成することもできます:

bluebox = $('<div>').addClass('bluebox');
bluebox.append($('<span>').attr('data-name', 'field1').text(field1.val()));
// field 2 etc..

次に、次のような値を取得します。

$('.bluebox').click(function() {
  field1.val( $(this).find('span[data-name=field1]').text() );
  // field 2 etc..
});

これがより複雑になると、さまざまな種類のフィールドの大文字と小文字を区別してフィールド名にループを使用することができます。

于 2012-06-19T20:30:33.957 に答える
-1

追加ボタンがデータをサーバーに投稿しない場合は、インラインエディターを使用して、.bluebox最後に保存ボタンを使用してデータをサーバーに投稿でき#sidebarます。

于 2012-06-19T20:30:11.333 に答える