为什么 addClass 不按预期显示和隐藏元素？

Question

这两个示例中的hide()、show()和.addClass有什么区别，为什么.addClass在第二个示例中不起作用？

这两个示例是简单的 jQuery 搜索函数，它们使用 :contain 在 .record div 中查找搜索词。

此示例适用于 hide() 和 show()。

$(document).ready(function() {
  $('#search').keyup(function() {

    var text = $(this).val().toLowerCase();

    $('.record').hide();

    $('.record').each(function() {

      if ($(this).text().toLowerCase().indexOf("" + text + "") != -1) {
        $(this).closest('.record').show();
      }
    });
  });
});

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

Search <input type='text' id='search' placeholder='Search Text'>

<br /><br />

<div class="record">Now is the time for all good men to come to the aid of their city</div>
<div class="record">Now is the time for all good women to come to the aid of their country</div>
<div class="record">Now is the time for all droids to come to the aid of their universe</div>
<div class="record">Now is the time for all fluffy bears to come to the aid of their wilderness</div>
<div class="record">Now is the time for all short people to come to the aid of their county</div>

但是在下面的例子中我需要做的是

1. 使用类 .display-none 和 .display-block，而不是 hide() 和 show()，因为我在另一个具有相同 .reason html 标记的 Javascript 函数中使用 hide() 和 show()。

2. 与上面的示例不同，最初display:none 是所有 .record div，因此它们是隐藏的，并且仅在它们实际是搜索结果时与 display:block 一起显示。

$(document).ready(function() {
  $('#search').keyup(function() {

    var text = $(this).val().toLowerCase();

    $('.record').addClass("display-none");

    $('.record').each(function() {

      if ($(this).text().toLowerCase().indexOf("" + text + "") != -1) {
        $(this).closest('.record').addClass("display-block");
      }
    });
  });
});

.display-block {
  display: block !important;
}

.display-none {
  display: none !important;
}

.record {
  display: none !important;
}

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

Search <input type='text' id='search' placeholder='Search Text'>

<br /><br />

<div class="record">Now is the time for all good men to come to the aid of their city</div>
<div class="record">Now is the time for all good women to come to the aid of their country</div>
<div class="record">Now is the time for all droids to come to the aid of their universe</div>
<div class="record">Now is the time for all fluffy bears to come to the aid of their wilderness</div>
<div class="record">Now is the time for all short people to come to the aid of their county</div>

Answer 1

看看你遇到的这个小例子。您有多个具有相同 CSS 特性的类相互应用

.three { color: red; }
.two { color: yellow; }
.one { color: blue; }


.one { background-color: green; }
.two { background-color: black; }
.three { background-color: silver; }

<div class="one two three">one two three</div>
<div class="one two">one two</div>
<div class="one">one</div>

所以当规则都具有相同的特异性时。列表中的最后一个获胜。由于最后一个是display none，所以都被隐藏了。

您也可以在不需要时使用最接近的。您已在记录中，因此无需再查找。

更改代码以添加一个类来隐藏元素。让特异性更高，这样你就不必处理重要的事情了。

$(document).ready(function() {
  $('#search').keyup(function() {
    var text = $(this).val().trim().toLowerCase();
    $('.record.display-block').removeClass("display-block");
    if (!text.length) return;
    $('.record').each(function() {
      if ($(this).text().toLowerCase().includes(text)) {
        $(this).addClass("display-block");
      }
    });
  });
});

.record.display-block {
  display: block;
}

.record {
  display: none;
}

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

Search <input type='text' id='search' placeholder='Search Text'>

<br /><br />

<div class="record">Now is the time for all good men to come to the aid of their city</div>
<div class="record">Now is the time for all good women to come to the aid of their country</div>
<div class="record">Now is the time for all droids to come to the aid of their universe</div>
<div class="record">Now is the time for all fluffy bears to come to the aid of their wilderness</div>
<div class="record">Now is the time for all short people to come to the aid of their county</div>

Answer 2

如前所述，您不会删除带有!important 修饰符的类。事实上，你所有的类（这里）都是这样，随着你的应用程序的增长，这将是一个令人头疼的问题。所有这些!important 规则都会变得混乱。这是一个简化：您可以简单地使用toggle(evaluation)，而不是show() 和hide()

https://api.jquery.com/toggle/

$(document).ready(function() {
  $('#search').keyup(function() {
      let val = $(this).val().toLowerCase();
      $('.record').each(function() {
          $(this).toggle(val != '' && $(this).text().toLowerCase().indexOf(val) > -1)
      });
  });
});

.record {
  display: none;
}

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

Search <input type='text' id='search' placeholder='Search Text'>

<br /><br />

<div class="record">Now is the time for all good men to come to the aid of their city</div>
<div class="record">Now is the time for all good women to come to the aid of their country</div>
<div class="record">Now is the time for all droids to come to the aid of their universe</div>
<div class="record">Now is the time for all fluffy bears to come to the aid of their wilderness</div>
<div class="record">Now is the time for all short people to come to the aid of their county</div>

Answer 3

看起来你把不同种类的东西混为一谈了。

show() 和 hide() 是 JS 函数。你可以说：显示找到搜索字符串的所有内容。

.show-results 和 .hide-results 是 HTML 类。你可以说：将 show-results 添加到找到搜索字符串的所有内容中，并使用样式 display: block 定义类 show-results。

display:none 是一种 CSS 样式。你可以说：将这种样式应用到所有没有找到搜索字符串的地方。