style="display:none" 不起作用。 jQuery 切换（）

Posted 2023-02-21

【中文标题】style="display:none" 不起作用。 jQuery 切换（）

【英文标题】：style="display:none" is not working. Jquery toggle()

【发布时间】：2022-01-10 21:39:25

【问题描述】：

我正在尝试过滤一个 div，它将style="sidplay:none" 分配给不在搜索结果中的所有元素，并且它工作正常，但该属性没有隐藏该元素！

Image here (direct image not available for me)

我的代码

WikiOption.Elements.searchInput.on("input", (thisx)=> 
    
    var val = $(thisx.target).val();
    $(".toc-wrap h3").each(function () 
        $(this).toggle($(this).text().toLowerCase().includes(val));
    );
);

【问题讨论】：

因为您有一些具有更高优先级的 css 属性，例如 (!important)。例如：显示：块！重要；您的问题与 jquery 代码无关。这是css

什么是WikiOption.Elements.searchInput？此外，提供的代码中没有任何内容会更改styles。

将其视为一个元素

【参考方案1】：

.toggle() 不是在您的情况下使用的正确方法。如果下一个输入事件触发并且<h3> 再次匹配，那么它将变回原来的状态。使用if/else 语句和.show() 和.hide() 方法。

此外，如果您 Backspace 并将 <input> 留空，则不会触发 input 事件，因此会添加 keyup 事件处理程序。

$('.search').on('input', function(e) 
  const txt = $(e.target).val().toLowerCase();
  $('.toc-wrap h3').each(function() 
    if ($(this).text().toLowerCase().includes(txt)) 
      $(this).show();
     else 
      $(this).hide();
    
  );
);

$('.search').on('keyup', function(e) 
  if (e.keyCode === 8 && $(this).val() === '') 
    $('.toc-wrap h3').hide();
  
);

h3 
  display: none

<input class='search' type='search'>
<article class='toc-wrap'>
  <h3>ABCDEFGHIJ</h3>
  <h3>klmnopqrst</h3>
  <h3>uvwxyz</h3>
  <h3>aAbBcC</h3>
</article>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>