jquery - 隐藏div中的html输入类型按钮在隐藏（）显示（）切换时缩小

Question

我有一个隐藏的表单，<div>当单击按钮时会显示该表单。隐藏的输入字段<div>包括按钮

当我第一次单击“添加”时，div 会按原样显示。我通过按取消关闭 div，然后重新单击“添加”，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("");

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

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

演示