Я пытаюсь сделать более одного поля <td> видимым или невидимым на моем экране на основе пользовательского ввода и класса элемента. Я использую jquery, html и javascript.JQuery добавляет класс, но не удаляет его из нескольких элементов td.
В принципе, у меня есть таблица HTML с разными полями. Я хочу, чтобы у этих полей был класс «Видимый», «Видимый и Обязательный» или «Невидимый». Когда пользователь выбирает параметр, он меняет класс этого элемента, удаляя предыдущий и добавляя новый. По умолчанию по умолчанию эти поля должны быть невидимыми.
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"});
}
Проблема у меня это: Когда я открываю страницу, поля получить "Невидимый" класс добавляется к ним так, как они должны быть, и они становятся скрытыми. Но когда я попытаюсь удалить невидимый класс позже и добавлю видимый класс, невидимый класс никогда не будет удален, и видимый класс никогда не будет добавлен: элементы просто сохраняют классы, которые у них были вначале, и поэтому остаются скрытыми.
Я видел предыдущие темы, связанные с проблемами с jquery add/removeClass, но никто, казалось, не помог мне. Дайте мне знать, если вам нужна дополнительная информация.
ОБНОВЛЕНИЕ 1: Спасибо за все ответы, все! К сожалению, и я думал, что это произойдет, код, который я разместил здесь, - это намного упрощенная версия кода, который у меня есть, и большинство полученных мной ответов, похоже, связаны с опубликованным синтаксисом - например, проблема с кавычками , Я обновил код, чтобы лучше отразить то, что я действительно делаю. Надеюсь, это сузит проблему.
ОБНОВЛЕНИЕ 2: Я знаю, что я делал неправильно. В моем коде, который я показал здесь, я вызываю ToggleFieldVisibility («. ReasonCode», 2), который отлично работает. Но в моем фактическом коде я извлекал номер 2 из SQL-запроса, используя внешнее приложение, и возвращал его как строку. «2» будет по сравнению с 2 в коммутаторе (или «1» до 1 и «3» до 3) и всегда перейдет к умолчанию, поэтому именно эти поля всегда выглядели невидимыми. Хах!
'OnClick = "ToggleFieldVisibility (". ReasonCode», 1) > 'неверно. Попробуйте' onclick = "ToggleFieldVisibility ('. ReasonCode', 1)"> ' И почему вы вручную устанавливаете видимость элементов по классам? Почему бы просто не использовать класс css? – Thomas
Работает для меня в хромированном состоянии –