Question

我正在尝试根据用户输入和元素类在屏幕上显示或隐藏多个<td>字段。我正在使用jquery，html和javascript。

基本上，我有一个包含不同字段的HTML表。我希望这些字段具有“可见”，“可见和必需”或“不可见”的类。当用户选择一个选项时，它会通过删除前一个元素并添加新元素来更改该元素的类。这些字段的onload默认值应该是不可见的。

HTML：

<body onload="ShowTheScreen()">

<table border="1">
 <tr>
  <td class="ReasonCode" align="center">
   <span class="FieldLabel">Reason Code</span>
  </td>
  <td class="CostCenter" align="center">
   <span class="FieldLabel">Cost Center</span>
  </td>
 </tr>
 <tr>
  <td class="ReasonCode" align="center">
   <input type="text" id="ReasonCode" name="ReasonCode" value="1243">
  </td>
  <td class="CostCenter" align="center">
   <input type="text" id="CostCenter" name="CostCenter" value="00123">
  </td>
 </tr>
</table>

<input type="button" value="MakeVis" onclick="PopulateTable()">

</body>

使用Javascript：

function ShowTheScreen(){
  ToggleFieldVisibility(".ReasonCode", 3);
  ToggleFieldVisibility(".CostCenter", 3);
  DisplayFields();
}

function PopulateTable(){
  ToggleFieldVisibility(".ReasonCode", 2);
  ToggleFieldVisibility(".CostCenter", 1);
  DisplayFields();
}

function ToggleFieldVisibility(element, x){
 switch(x){
  case 1:
   $(element).removeClass("Invisible Required").addClass("Visible");
   break;
  case 2:
   $(element).removeClass("Invisible").addClass("Visible Required");
   break;
  case 3:
   $(element).removeClass("Visible Required").addClass("Invisible");
   break;
  default:
   $(element).removeClass("Visible Required").addClass("Invisible");
   break;
 }
 DisplayFields();
}

function DisplayFields(){
 $(".Invisible").css({"visibility":"hidden"});
 $(".Visible").css({"visibility":"visible"});
}

我遇到的问题是这个：当我打开页面时，字段会添加“Invisible”类，因为它们应该是隐藏的。但是当我稍后尝试删除不可见类并添加可见类时，永远不会删除不可见类，并且永远不会添加可见类：元素只是保留它们最初拥有的类，因此保持隐藏。

我看到以前的线程与jquery add / removeClass的问题有关，但没有一个似乎能帮助我。如果您需要更多信息，请告诉我。

更新1：感谢所有回复，大家！不幸的是，我认为这会发生，我在这里发布的代码是我实际拥有的代码的简化版本，我收到的大部分答案似乎都与发布的语法有关 - 就像报价的问题一样。我已经更新了代码，以更好地反映我真正在做的事情。希望这会缩小问题范围。

更新2：我知道我做错了什么。在我的代码中，我在这里显示我正在调用ToggleFieldVisibility（“。ReasonCode”，2），它工作正常。但在我的实际代码中，我使用外部应用程序从SQL调用中检索数字2，并将其作为字符串返回。将“2”与开关中的2（或“1”与1和“3”与3）进行比较并始终进入默认值，这就是为什么这些字段总是不可见的。哈！

Answer 1

我认为问题在于您的内联onClick处理程序。正如您目前所拥有的那样，您使用引号作为属性分隔符并包装您的字符串;这将导致您的属性被截断为ToggleFieldVisibility("，并且您的函数将无法运行。

尝试：

<input type="button" value="MakeVis" onclick="ToggleFieldVisibility('.ReasonCode', 1)">
<input type="button" value="MakeVisReq" onclick="ToggleFieldVisibility('.ReasonCode', 2)">
<input type="button" value="MakeInVis" onclick="ToggleFieldVisibility('.ReasonCode', 3)">

如果您出于某种原因需要使用"，则可以使用\ {(\".ReasonCode\"...

始终将其转义

Answer 2

快速猜测，在最后调用DisplayFields()函数时，它以内联样式标记的形式将css添加到元素中。在执行.removeAttr("style")

后立即尝试运行removeClass()

代码：

jquery的：


function ToggleFieldVisibility(element, x){
            //alert("Hello");
            switch(x){
                case 1:
                    $(element).removeClass("Invisible Required").removeAttr("style").addClass("Visible");
                    break;
                case 2:
                    $(element).removeClass("Invisible").removeAttr("style").addClass("Visible Required");
                    break;
                case 3:
                    $(element).removeClass("Visible Required").removeAttr("style").addClass("Invisible");
                    break;
                default:
                    $(element).removeClass("Visible Required").removeAttr("style").addClass("Invisible");
                    break;
                }
            DisplayFields();
        }

        function DisplayFields(){
            $(".Invisible").css({"visibility":"hidden"});
            $(".Visible").css({"visibility":"visible"});
        }

HTML：


<body onload="ToggleFieldVisibility('.ReasonCode .CostCenter', 3)">
<table border="1">
 <tr>
  <td class="ReasonCode" align="center">
   <span class="FieldLabel">Reason Code</span>
  </td>
  <td class="CostCenter" align="center">
   <span class="FieldLabel">Cost Center</span>
  </td>
 </tr>
 <tr>
  <td class="ReasonCode" align="center">
   <input type="text" id="ReasonCode" name="ReasonCode" value="1243">
  </td>
  <td class="CostCenter" align="center">
   <input type="text" id="CostCenter" name="CostCenter" value="00123">
  </td>
 </tr>
</table>

<input type="button" value="MakeVis" onclick="ToggleFieldVisibility('.ReasonCode', 1)" />
<input type="button" value="MakeVisReq" onclick="ToggleFieldVisibility('.ReasonCode', 2)" />
<input type="button" value="MakeInVis" onclick="ToggleFieldVisibility('.ReasonCode', 3)" />

</body>

JQuery正在添加一个类，但不是从多个td元素中删除它

2 个答案: