隐藏div中的html输入类型按钮收缩hide（）show（）切换

Question

我有一个隐藏<div>的表单会在单击按钮时显示。隐藏<div>中的输入字段包含按钮

当我第一次点击“添加＆＃39; div显示应该如此。我按下取消关闭div，然后我重新点击＆＃39;添加＆＃39; div显示缩小的按钮。

检查jsfiddle： http://jsfiddle.net/uc3Ef/

Answer 1

这是因为您将所有value元素的input属性设置为空，value属性用作按钮的标签文本。

改变这个：

$('.hiddenDiv').find('input').each(function(){
    $(this).val("");
});

要：

$('.hiddenDiv').find('input[type="text"]').each(function(){
     $(this).val("");
});

以下是演示：http://jsfiddle.net/uc3Ef/1/

此外，您无需在此处使用.each()，您可以这样做：

$('.hiddenDiv').find('input[type="text"]').val("");

这是有效的，因为.val(STRING)将设置所有选定元素的值。以下是.val()的文档：http://api.jquery.com/val

以下是演示：http://jsfiddle.net/uc3Ef/3/

Answer 2

点击cancel

后，您将清除该值

$(this).val("");

Answer 3

它们正在“缩小”，因为您正在消除该值（这是按钮显示的文本）。

从“取消”按钮单击事件中删除此行，然后重试：）

$(this).val("");

Answer 4

您要将输入值设置为""并且输入选择器选择按钮，您可以使用input[type="text"]代替，也不需要使用each方法，您可以使用：

 $('.hiddenDiv').find('input[type="text"]').val("");

jQuery show()方法等于css('display', 'block')，使用show()显示元素就足够了：

 $('.hiddenDiv').show();   

DEMO