Question

我有一个搜索功能，必须隐藏不符合搜索条件的div。

元素中的HTML

<div class="form-group" id="number">
  <input class="form-control tfInput" id="tfInput1" type="text" value="test">
  <button type="button" class="btn btn-success" id="update1"> Save
  </button>
  <button type="button" class="btn btn-default" aria-label="Delete" id="delete1">Delete
  </button>
</div>

这些div中有多个被加载到页面中。所有这些div都有类.tfInput，并附加到ID为"list"的表单中。

将div加载到

中的HTML

<form class="form-inline">
    <div class="form-group">
        <input class="form-control" type="text" id="searchElement" style="width: 200px" />
        <button type="button" class="btn btn-default" onclick="search()">search</button>
    </div>
</form>



<div class="container">
    <form class="form-inline" id="list"></form>
</div>

有一个标识为"searchElement"的搜索框，当点击按钮或搜索框中显示keyup()事件时，系统会调用搜索功能。

的Javascript

function search() {
  $.each($('#list .tfInput'), function(index, input) {
    if (new RegExp($('#searchElement').val().toUpperCase()).test(input.value.toUpperCase())) {
      $(input).parent().show();
    } else {
      $(input).parent().fadeOut();
    }
  })
};

问题

divs fadeout但他们在同一秒内重新出现他们永远不会隐藏有人解决方案吗？

THX

Answer 1

现在已修好。

我更改了一些css属性，因为bootstrap没有达到我的预期。

这就是把一切搞砸的错误。

我的错误？我将所有div的display属性更改为block !important，因此他们不断重新出现。

感谢您的所有输入！

Answer 2

我有类似的问题:)尝试阻止你的按钮，如：

 $("#Button").click(
             function(event) {
                  $(this).attr("disabled", true);
                  event.preventDefault();
                  //your code
                  $(this).attr("disabled", false);
            };
);

由于未知原因，javascript喜欢将点击解释为双击。

此外，如果您的元素具有默认＆＃34;模式＆＃34;它可以回到它。为了防止它，我们只使用了event.preventDefault（）

第三种选择是你把它藏在其他地方。

Forth选项：您正在使用每个tfInput元素。所以它找到第一个 - 隐藏输入父。找到第二个 - 显示输入父。找到第三个 - 再次隐藏输入父项等。 它切换相同的元素。

Answer 3

试试这个

$( input ).fadeOut( "slow" );

fadeOut（）父元素返回

3 个答案: