如何使用具有不同function的多个单选按钮？

我正在开发一个项目，我需要在其中创建一个带有几个单选按钮的HTML页面。

• 第一个单选按钮是INSERT 。 一旦我单击INSERT单选按钮，我想在INSERT单选按钮下面显示三个文本框。 第一个文本框是datacenter ，第二个文本框是node ，第三个文本框是data 。
• 第二个单选按钮是UPDATE 。 一旦我点击UPDATE单选按钮，我想在UPDATE单选按钮正下方显示相同的三个文本框。
• 第三个单选按钮是DELETE 。 一旦我单击DELETE单选按钮，我想在DELETE单选按钮下面只显示一个文本框。 在这个文本框中将是node 。
• 第四个单选按钮是PROCESS 。 一旦我单击PROCESS单选按钮，我想在PROCESS单选按钮下方显示四个文本框。 在这第一个文本框中将是datacenter ，第二个文本框将是node ，第三个文本框将是conf ，第四个文本框将是data 。

我能够使前两个单选按钮工作（插入和更新），但不知何故，我无法理解如何使最后两个单选按钮工作。

下面是我的HTML

 
   Insert 
 
  Update 
 
   

下面是我的jquery –

 $(document).ready(function(){ $(".changeAction").on("click", function(){ $('.changeable').html('') var divId = $(this).attr("div-id"); $("#dynamicName").val(divId); divId = "#"+divId; var myInput = ' Datacenter    Node    Data  ' $(divId).html(myInput); }) }) 

这是我的jsfiddle 。 如果有人可以提供任何jsfiddle示例，那将会有很大帮助吗？

Answer 1

在javascript部分尝试此代码，

 var datacenter = ' Datacenter  '; var node = ' Node  '; var data = ' Data  '; var config = ' Config  '; $(".changeAction").on("click", function () { var divId = $(this).attr("div-id"); $('.changeable').html(''); $("#dynamicName").val(divId); switch (divId) { case 'insert': //insert stuff goes here!! divId = "#" + divId; var myInput = datacenter + node + data; $(divId).html(myInput); break; case 'update': //update stuff goes here!! divId = "#" + divId; var myInput = datacenter + node + data; $(divId).html(myInput); break; case 'Delete': //Delete stuff goes here!! divId = "#" + divId; var myInput = node; $(divId).html(myInput); break; case 'process': //process stuff goes here!! divId = "#" + divId; var myInput = datacenter + node + config + data; $(divId).html(myInput); break; } }); 

看到FIDDLE DEMO

Answer 2

将您的HTML代码更改为此

   Insert 
 
  Update 

  Delete 
 
  Process