オプションを変更すると別の場所で選択されます

Question

私のアプリケーションには少し問題があります。

説明は非常に難しいですが、あなたが私のフィドルで以下の手順を実行すると、あなたはそれをもっとよく理解できます。

1：グリッドを開き、オプション「5」を選択します。テキストボックスに値「5」が表示されます。

2：[質問を追加]ボタンをクリックすると、テキストボックスで選択されたオプション値を示す新しい行が表示されます。

3：行内の「グリッドを開く」リンクをクリックし、オプション「8」を選択します。行内のテキストボックスが値「8」に変わります。

しかし、上部のオプション機能に戻り、 "グリッドを開く"をクリックすると、テキストボックスにはまだ正しい "5"が表示されますが、オプション "5" 。

ユーザーがテーブル行からオプションを変更した場合、上部で選択したオプションは変更されません。

私のコードはフィドルです。あなたのアイデアをテストするために使用してください。 click here

Answer 1

問題は、同じ要素を再利用して番号を選択していることです。数字がクリックされるたびに、それは「アクティブ」になります。このようにするのではなく、グリッドが表示されているときに該当するテキストボックスに基づいて適切なボタンを選択します。

http://jsfiddle.net/f8cKm/25/

$('.showGrid').live('click', function(jqEvt) { 

     $(".gridBtns").removeClass("gridBtnsOn"); 

     var value = $(this).siblings('input[name=gridValues]').val(); 

     $("#btn" + value).addClass("gridBtnsOn"); 

Answer 2

showGridのイベントを処理するときは、対応するテキストボックスから値を取得し、グリッドで選択します。