Fatal编程技术网
  • javascript/
  • Javascript JQuery正在添加一个类，但没有从多个td元素中删除它

Javascript JQuery正在添加一个类，但没有从多个td元素中删除它

javascript jquery html

Javascript JQuery正在添加一个类，但没有从多个td元素中删除它,javascript,jquery,html,addclass,removeclass,Javascript,Jquery,Html,Addclass,Removeclass,我试图根据用户输入和元素类，在屏幕上显示或不显示多个字段。我正在使用jquery、html和javascript 基本上，我有一个带有不同字段的HTML表。我希望这些字段有一个“可见”、“可见且必需”或“不可见”的类。当用户选择一个选项时，它会通过删除前一个并添加新的来更改该元素的类。这些字段的onload默认值应不可见 HTML: <body onload="ShowTheScreen()"> <table border="1"> <tr> <

我试图根据用户输入和元素类，在屏幕上显示或不显示多个
字段。我正在使用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>

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"});
}
我遇到的问题是：当我打开页面时，字段会像应该的那样添加到“不可见”类中，它们会被隐藏。但是，当我稍后尝试删除不可见类并添加可见类时，不可见类永远不会被删除，而可见类永远不会被添加：元素只是保留了它们最初拥有的类，因此保持隐藏状态

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

更新1：谢谢大家的回复！不幸的是，我认为这会发生，我在这里发布的代码是我实际拥有的代码的一个非常简化的版本，我收到的大多数答案似乎都与发布的语法有关——比如引用的问题。我已经更新了代码，以更好地反映我真正在做什么。希望这能缩小问题的范围

更新2：我知道我做错了什么。在我这里展示的代码中，我调用了ToggleFieldVisibility（“.ReasonCode”，2），这很好。但在我的实际代码中，我使用外部应用程序从SQL调用中检索数字2，它以字符串形式返回。“2”将与开关中的2进行比较（或“1”到1和“3”到3），并始终处于默认状态，因此这些字段总是不可见。哈

快速猜测，在最后调用
DisplayFields（）
函数时，它以内联样式标记的形式将css添加到元素中。执行
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:


原因码
成本中心
我认为问题在于内联
onClick
处理程序。正如您目前拥有的那样，您使用引号作为属性分隔符并包装字符串；这将导致属性被截断为
ToggleFieldVisibility（“
”），并且函数将不会运行

尝试：
如果您出于某种原因需要使用
“
s，您可以始终使用\:
（\“.ReasonCode\”…

onclick=“ToggleFieldVisibility”（.ReasonCode），1）>
将其转义。请尝试
onclick=“ToggleFieldVisibility（'.ReasonCode'，1）“>
为什么要按类手动设置元素的可见性？为什么不使用css类？看到了，我不确定这是否是整个问题。感谢您的快速回复：）！不幸的是，这并没有从这些字段中删除“不可见”类。我发出了警告（元素id prevclass newclass）在调用DisplayFields（）之前，ToggleFieldVisibility（）末尾的；语句，我可以看到字段被添加回屏幕，因为它们的样式已被删除，但一旦调用DisplayFields（），它们将再次消失，因为它们仍然具有“不可见”类@lcii请尝试我发布的代码，因为这对我来说很合适。 

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

<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)">