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 子句，并且不会重新生成以下单元格的内容。

是什么导致此警报框导致页面按预期运行，但它的缺失使页面出现意外？是用户单击确定按钮的时间延迟吗？我不希望在生产页面上出现此警告框，那么如何使页面在有或没有警告框的情况下表现相同？

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"-请注意大小写。

oldVal永远不会undefined像您在标记中设置的那样，因此||您的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 === undefinedcatch 第一次通过函数。

于 2012-08-21T22:36:42.260 回答