我正在一个项目中,我需要用几个单选按钮制作一个HTML页面。
第一个按钮是INSERT
。单击INSERT按钮后,我想在INSERT按钮下面显示三个文本框。第一个文本框是datacenter
,第二个文本框是node
,第三个文本框是data
。
第二个按钮是UPDATE
。一旦单击“更新”按钮,我想在“更新”按钮下方的三个文本框上方显示相同的内容。
第三个按钮是DELETE
。单击删除按钮后,我只想在删除按钮下方仅显示一个文本框。在这个文本框中将是node
。
第四个按钮是PROCESS
。单击“过程”按钮后,我想在“过程”按钮下方显示四个文本框。在此第一个文本框为datacenter
,第二个文本框为node
,第三个文本框为data
,第四个文本框为conf
最后,我将按下提交按钮。
我可以在jsfiddle中提出这个设计
问题陈述:-
但是以某种方式,几乎没有任何事情不起作用,例如当我第一次单击“处理”按钮时,没有显示Submit
按钮。第一次意味着,如果单击“处理”按钮,则它仅显示三个文本框,分别是数据中心,节点和数据,但通常应显示四个文本框,如上所示。而且提交按钮也没有显示。
如果有人可以提供jsfiddle示例,将会有很大的帮助?
而且我在jsfiddle中正在做任何不应该做的事情吗?含义不是隐藏元素,而是应该删除它们?
我正在跟踪先前的问题here。在我之前的问题中,我的设计是另外一回事,但是在那之后,我能够提出我的新设计,如上面的jsfiddle所示。
最佳答案
我们在讨论中对此进行了讨论,并提出了http://jsfiddle.net/4Nmqk/12/
为每种类型的提交都具有表单要简单得多,而不是试图隐藏和显示表单的正确部分。除非您有一种从逻辑(如何显示/取消显示)中抽象数据(显示哪些部分)的方法,否则最终将是一团糟,就像OP的原始小提琴一样。
我的小提琴创建了更多的html,但是javascript很简单:
$('.btn-primary').click( function(){
$( '.btn-primary').removeClass( 'currentButton' )
$( this).addClass('currentButton')
$( 'form' ).hide()
$( "#form_" + $(this).attr('id') ).show();
})
还添加了一些清理功能,只是为了好玩。
当然,此方法最复杂的实现可能会大量集成到服务器端代码中,并且会动态生成很多,但是出于回答问题的目的,此技术似乎更简单,更强大(请注意,这很容易添加其他内容,例如我添加到每个表单的标题。添加描述性文本,不同的表单元素等同样容易。