我正在开发一个项目,我需要在其中创建一个带有几个单选按钮的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所示。
答案 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();
})
还添加了一些清理,只是为了好玩。
当然,最复杂的实现可能会大量集成到服务器端代码中,并且可以更加动态地生成,但为了回答问题,这种技术似乎更直接,更有能力(注意如何很容易添加额外的内容,比如我添加到每个表单的标题。添加描述性文本,不同的表单元素等同样容易。