Question

我有下表。在此表中，我动态添加了以下形式的行：

<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
}

问题是当我从下拉菜单中选择“）”选项然后选择另一个选项。页面现在按预期运行。

当非常重要的行不被注释掉时，两个警告框弹出“我造成时间延迟”和“重新生成”，并且以下单元格的内容重新生成为预期。
当非常重要的行 IS 被注释掉时，JavaScript不会输入else子句，并且不会重新生成以下单元格的内容。

导致此警告框导致页面按预期运行的原因是什么，但缺少使页面出现意外行为？是用户点击确定按钮的时间延迟？我不希望在生产页面上显示此警告框，那么无论是否有警报框，如何使页面的行为方式相同？

Answer 1

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

.logicSelectionMenu没有属性value。

改为使用.val()：

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

另外，作为旁注，您通过拥有名为oldvalue的属性使HTML无效，您应该使用data-*属性，并将其设置为：data-oldvalue="oldvalue"。< / p>

现在你正在这样做，当你设置attr("oldValue") - 注意案例时，你正在访问oldvalue="val"。

oldVal永远不会undefined，因为您已在标记中设置它，因此||语句的if部分是多余的。

Answer 2

感谢 ahren的观察，我找到了修复我的代码。

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捕获第一遍函数。

非常奇怪的JS / jQuery行为 - alert（）包含/排除

2 个答案: