Javascript 将必填字段设置为隐藏/显示切换

我有一个切换功能，可以隐藏，例如输入文本或不。 我想在没有隐藏的情况下设置一个required（但在隐藏的情况下，应该不需要）

我试图将

[必需的]

和

窗口设置为id，例如测试（见下文）。警报

不起作用。有没有解决此问题的建议

非常感谢您的支持和反馈

<tr>
    <td>Ice: </td>
    <td><input id="test" name="test" type="text" size="40">
    <button class="test btn" type="button" onClick="$('#test').toggle();">Hide</button></td>
</tr>   

$(".test").click(function() { 
   var lable = $(".test").text().trim();

   if(lable == "Hide") {
     $(".test[required]").text("Show").css( "background", "yellow").css ("color", "black").css("padding","1px 12px")
     return window.alert('please fill out');
     $(".text").hide().css( "background", "orange").css ("color", "black").css("padding","1px 12px");
   }
   else {
     $(".test").text("Hide").css( "background", "orange").css ("color", "black").css("padding","1px 12px");
     $(".text[required]").show().css( "background", "yellow").css ("color", "black").css("padding","1px 12px")
     return window.alert('please fill out');
       }

  });   

冰：
隐藏
$（“.test”）。单击（函数（）{
变量标签=$（“.test”）.text（）.trim（）；
如果（标签=“隐藏”）{
$（“.test[必需]”）.text（“Show”）.css（“背景”、“黄色”）.css（“颜色”、“黑色”）.css（“填充”、“1px 12px”）
返回窗口。警报（“请填写”）；
$（“.text”）.hide（）.css（“背景”、“橙色”）.css（“颜色”、“黑色”）.css（“填充”、“1px 12px”）；
}
否则{
$（“.test”）.text（“隐藏”）.css（“背景”、“橙色”）.css（“颜色”、“黑色”）.css（“填充”、“1px 12px”）；
$（“.text[必需]”）.show（）.css（“背景”、“黄色”）.css（“颜色”、“黑色”）.css（“填充”、“1px 12px”）
返回窗口。警报（“请填写”）；
}
});   

您可以执行以下操作将其设置为必需：

$('.test').attr('required', '');

要删除所需的文件，您可以执行以下操作：

$('.test').removeAttr('required');

---

什么是

.test

和什么是

.text

@seethrough，我添加了上面的信息test是ID，text是输入字段，谢谢您的支持。您的意思是：替换$（“.test[必需]”）。是：）这就是从元素中添加和删除属性的方式。是否尝试设置一些断点以查看代码是否实际运行？所有内容都在运行，但我对该要求有一个小问题：）那么，如果需要，是否检查DOM是否已添加/删除？