Javascript 如何根据按下的按钮显示特定的文本框？

我正在做一个项目，我需要制作一个带有几个单选按钮的HTML页面

• 第一个按钮是，

  INSERT

  。单击“插入”按钮后，我想在“插入”按钮下方显示三个文本框。第一个文本框是数据中心，第二个文本框是节点，第三个文本框是数据
• 第二个按钮是，

  UPDATE

  。只要我点击更新按钮，我想在更新按钮的下方显示上面三个相同的文本框
• 第三个按钮是，

  DELETE

  。单击“删除”按钮后，我只想在“删除”按钮下方显示一个文本框。在这个文本框中，将显示

  节点

• 第四个按钮是，

  处理

  。只要我点击“处理”按钮，我想在“处理”按钮的下方显示四个文本框。在这个文本框中，第一个文本框将是

  数据中心

  ，第二个文本框将是

  节点

  ，第三个文本框将是

  数据

  ，第四个文本框将是

  配置

最后会有提交按钮，我会按下

我能在未来几年内想出这个设计

问题陈述：-

但不知何故，几乎没有什么事情不起作用，例如当我第一次单击“处理”按钮时，

Submit

按钮没有显示出来。这是第一次，如果您单击“处理”按钮，那么它只显示三个文本框，即数据中心、节点和数据，但通常它应该显示四个文本框，如上所示。而且提交按钮也没有显示

如果有人能提供JSFIDLE示例，这将是非常有帮助的

还有，在我的jsfiddle中有什么我不应该做的错误吗？意思是我应该删除元素而不是隐藏元素

---

我正在跟进上一个问题。在我的上一个问题中，我的设计是其他的，但在那之后，我能够提出我的新设计，如上面的JSFIDLE所示。

我们在讨论中讨论了它，并提出了

对于每种类型的提交，使用表单比试图隐藏和显示表单的正确部分更简单。除非你有一个从逻辑（如何显示/取消显示）中提取数据（要显示哪些部分）的方法，否则它最终会变得一团糟，就像最初的小提琴一样

My fiddle创建了更多的html，但javascript非常简单：

$('.btn-primary').click( function(){
    $( '.btn-primary').removeClass( 'currentButton' )
    $( this).addClass('currentButton') 
    $( 'form' ).hide()
    $( "#form_" + $(this).attr('id') ).show();
})

还添加了一些清理，只是为了好玩

---

当然，这方面最复杂的实现可能会大量集成到服务器端代码中，并以更动态的方式生成，但是为了回答这个问题，这项技术似乎更直接、更有效（请注意，添加附加内容是多么容易，例如我添加到每个表单的标题。添加描述性文本、不同表单元素等也同样容易）.

当我第一次单击流程按钮时，它只显示三个文本框，而应该显示四个文本框，如问题中所示。是的。.我添加了提交显示按钮，但当我单击流程按钮时，它只显示三个文本框。.你能提供一个jsfilddle示例吗？但你仍然不是

show（）

ing该部分中的

“#value”

textbox。如果可能的话，你能提供一个jsfilddle示例吗？在我看来，我确实在做一些愚蠢的事情。你能解释一下为什么要删除和添加不同的文本框吗？这是我的要求。对吗？一旦我单击INSERT按钮，我想显示三个文本框，如上所示。如果我ck UPDATE按钮，我想再次显示三个相同的文本框..但是如果我单击delete按钮，我只想显示node文本框，最后如果我单击PROCESS按钮，我想显示四个文本框，如上图所示..为此，我添加和删除内容..可能不是一个优雅的解决方案..这是我在几分钟内提出的utes..：(