Question

我有一个使用jQuery 3.2.1的应用程序。它包含2个名为#primarySearch和#advancedSearch的单独搜索表单。

#primarySearch始终可见，但#advancedSearch在页面加载时隐藏：

<form id="primarySearch">

</form>

<form id="advancedSearch" style="display: none;">

</form>

有一个显示/隐藏#advancedSearch的按钮，如下所示：

/* Open Advanced Search */
$('#advancedSearchCta b').click(function(){
    $('#advancedSearch').toggle();
    $('#advancedSearchCta').hide();
});

/* Close Advanced Search */
$('#closeAdvancedSearch').click(function(){
    $('#advancedSearch').toggle();
    $('#advancedSearchCta').show();
});

这很好用。

每个表单都包含许多输入。我已经实现了一个按钮（#resetSearchBtn）来清除所有表单输入 - 实际上是一个“重置搜索”按钮：

 $('#resetSearchBtn').click(function(e){
    e.preventDefault();
    $(':input','#primarySearch, #advancedSearch')
    .not(':button, :submit, :reset, :hidden')
    .val('')
    .removeAttr('checked')
    .removeAttr('selected');
 });

如果<{b> #advancedSearch可见，则此工作正常。但是，如果用户关闭高级搜索 - 从而将其切换回display: none;，则无效。基本上，只有在#advancedSearch可见时才会重置搜索。

我不能依赖于此，因为用户可以打开高级搜索，输入内容，关闭它，然后尝试重置。它会将数据保留在#advancedSearch中。该应用程序是基于ajax的，并对形成变化做出反应。所以它基本上将“错误的”数据提交给服务器。

这是我应该寻找的应用中的正常行为还是有些冲突？有什么解决方案？

Answer 1

我对你的代码有一种奇怪的行为并不感到惊讶。根据这段代码：

$(':input','#primarySearch, #advancedSearch')
    .not(':button, :submit, :reset, :hidden')
    .val('')
    .removeAttr('checked')
    .removeAttr('selected');

您可以获取表单中的所有输入（包括复选框和无线电）。您将值设置为''。此时，您的复选框和无线电已经死了。您删除了所有内容的checked和selected。

首先：不要设置复选框和无线电的值。我不认为这是你想要的。

第二：checked和selected是布尔属性，必须使用.prop()处理

第三：您的代码省略了所有隐藏元素（因为:hidden中的.not选择器）。如果隐藏表单，它就不会起作用。明显。

Answer 2

在/Test/word1,word2/AA/blablabla过滤器中，您指定不来选择隐藏的元素。带有not()的表单标记下方的任何内容都将被隐藏，并且不会被清除。尝试在选择器中更具体。也许：

display:none

jquery不会在用CSS隐藏的表单中更改输入值

2 个答案: