如何根据按下哪个按钮显示某些文本框?

时间:2014-03-08 06:24:42

标签: javascript jquery html css jsp

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

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

最后我会按下提交按钮。

我可以在jsfiddle

中提出这个设计

问题陈述: -

但不知何故,当我第一次点击Process按钮时,很少有东西不起作用,例如Submit按钮没有显示。第一次意思是,如果单击“处理”按钮,则它只显示三个文本框,即数据中心,节点和数据,但通常它应显示四个文本框,如上所示。并且也没有显示提交按钮。

如果有人能提供jsfiddle示例,那将会有很大的帮助吗?

我在jsfiddle做的事情也有什么不对,我不应该这样做?意思而不是隐藏元素,我应该删除它们吗?

我正在跟进上一个问题here。在我之前的问题中,我的设计是另外的东西,但在那之后,我能够提出我的新设计,如上面的jsfiddle所示。

1 个答案:

答案 0 :(得分:0)

我们在讨论中讨论了一些内容并提出了http://jsfiddle.net/4Nmqk/12/

为每种类型的提交提供表单更简单,而不是试图隐藏和显示表单的正确部分。除非你有一个从逻辑中抽象出数据(显示哪些部分)的方法(如何显示/取消显示它们),否则它最终会变得混乱,就像OP原始的Fiddle一样。

我的小提琴创造了更多的html,但javascript就像:

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

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

当然,最复杂的实现可能会大量集成到服务器端代码中,并且可以更加动态地生成,但为了回答问题,这种技术似乎更直接,更有能力(注意如何很容易添加额外的内容,比如我添加到每个表单的标题。添加描述性文本,不同的表单元素等同样容易。