0

次の表があります。このテーブルでは、次の形式の行を動的に追加しました。

<tr class="conditionalRow">
  <td class="logicalData">
    <select oldvalue="AND" class="logicSelectionMenu">          
      <option value="AND">AND</option>
      <option value="AND (">AND (</option>
      <option value="OR">OR </option>
      <option value="OR (">OR (</option>
      <option value=")">)</option>
    </select>
  </td>
  <td class="fieldData">
    <p>Other Data that you don't need to worry about</p>  
  </td>
  <td class="conditionData">
    <p>Other Data that you don't need to worry about</p>  
  </td>
  <td class="compareData">
    <p>Other Data that you don't need to worry about</p>  
  </td>
  <td>
   <button class="removeConditionButton" type="button"> - </button>
  </td>
</tr>

次のjQueryセレクターを使用してonchangeイベントを処理します。

$(document).ready(function() {
  $(".logicSelectionMenu").change(function() {
    var row = $(this).closest("tr");
    updateLogicMenu(row);
  });
  $(".logicSelectionMenu").focus(function() {
    $(this).attr("oldValue",$(this).val());
  });
});

function updateLogicMenu(inRow) {
  var selectedVal = $(inRow).find(".logicSelectionMenu").attr("value");
  var oldVal = $(inRow).find(".logicSelectionMenu").attr("oldValue");

/* -=>  VERY IMPORTANT LINE BELOW!!!  <=- */
//  alert("Hi, I cause a time delay");

  if (selectedVal == ")") {
  // clears cell contents if ")" is choosen by user
    $(inRow).find(".fieldSelectionMenu"    ).css("visibility","hidden").html("");
    $(inRow).find(".conditionSelectionMenu").css("visibility","hidden").html("");    
    $(inRow).find(".compareData"           ).css("visibility","hidden").html("");
  }
  else if(oldVal == ")" || oldVal === undefined) {
  // regenerates cell contents when user changes selection from ")" to another
    alert("regenerating");
    $(inRow).find(".fieldSelectionMenu").css("visibility","visible").html(getFieldSelectionOptions());
    $(inRow).find(".conditionSelectionMenu").css("visibility","visible");    
    $(inRow).find(".compareSelectionMenu").css("visibility","visible");
    updateFieldMenu(inRow); // function regenerates the next cell contents
                            // and calls another function 
                            // which regenerates the next cell contents, 
                            // and chains on and on ... etc
  }
  else { ; } // no action is needed,no clearing or regeneration
}

問題は、ドロップダウンメニューから[）]オプションを選択してから、別のオプションを選択した場合です。これで、ページは期待どおりに動作します。

  • 非常に重要な行がコメントアウトされていない場合、両方のアラートボックスがポップアップし、「時間遅延が発生します」と「再生中」と表示され、次のセルの内容が期待どおりに再生されます。

  • 非常に重要な行がコメント化されている場合、JavaScriptはelse句を入力せず、次のセルの内容は再生成されません。

このアラートボックスが原因でページが期待どおりに動作するのに、ページが予期しない動作をする原因は何ですか？ユーザーが[OK]ボタンをクリックするのは時間の遅れですか？このアラートボックスを本番ページに表示したくないので、アラートボックスの有無にかかわらず、ページを同じように動作させるにはどうすればよいですか？

4

2 に答える 2

0 
var selectedVal = $(inRow).find(".logicSelectionMenu").attr("value");

.logicSelectionMenu属性がありませんvalue。

.val()代わりに使用してください：

var selectedVal = $(inRow).find(".logicSelectionMenu").val();

また、補足として、という属性を持つことでHTMLを無効にしているのでoldvalue、属性を使用して次のdata-*ように設定する必要がありますdata-oldvalue="oldvalue"。

そして、あなたが今それをしている方法で、あなたはattr("oldValue")あなたが設定するときにアクセスしていますoldvalue="val"-ケースに注意してください。

oldValundefinedマークアップで設定したとおりになることはないため、ステートメントの||一部ifは冗長です。

于 2012-08-21T22:08:19.127 に答える
0

ahrenの観察のおかげで、コードの修正が見つかりました。

アーレンの観察：

「選択が変更された後、フォーカスイベントが再度発生するため、oldValが更新されます。alert（）を使用すると、このフォーカスが削除され、再度発生しなくなります。」

修正：

$(document).ready(function() {
  $(".logicSelectionMenu").change(function() {
    var row = $(this).closest("tr");
    updateLogicMenu(row);
  });

/* DON'T USE onfocus event
   to set the oldValue
  $(".logicSelectionMenu").focus(function() {
    $(this).attr("oldValue",$(this).val());
  });
*/

});

function updateLogicMenu(inRow) {
  var selectedVal = $(inRow).find(".logicSelectionMenu").attr("value");
  var oldVal = $(inRow).find(".logicSelectionMenu").attr("data-oldValue");

/* -=>  VERY IMPORTANT LINE BELOW!!!  <=- */
//  alert("Hi, I cause a time delay");

  if (selectedVal == ")") {
  // clears cell contents if ")" is choosen by user
    $(inRow).find(".fieldSelectionMenu"    ).css("visibility","hidden").html("");
    $(inRow).find(".conditionSelectionMenu").css("visibility","hidden").html("");    
    $(inRow).find(".compareData"           ).css("visibility","hidden").html("");
  }
  else if(oldVal == ")" || oldVal === undefined) {
  // regenerates cell contents when user changes selection from ")" to another
    alert("regenerating");
    $(inRow).find(".fieldSelectionMenu"    ).css("visibility","visible").html(getFieldSelectionOptions());
    $(inRow).find(".conditionSelectionMenu").css("visibility","visible");    
    $(inRow).find(".compareSelectionMenu"  ).css("visibility","visible");
    updateFieldMenu(inRow); // function regenerates the next cell contents
                            // and calls another function 
                            // which regenerates the next cell contents, 
                            // and chains on and on ... etc
  }
  else { ; } // no action is needed,no clearing or regeneration

  /* SET THE VALUE HERE: */
  $(inRow).find(".logicSelectionMenu").attr("data-oldValue",selectedVal);
}

oldValue関数の最後にの値を設定し、関数oldVal === undefinedの最初のパスをキャッチします。

于 2012-08-21T22:36:42.260 に答える