這兩個示例中的 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>但我需要在下面的例子中做的是
使用類
.display-noneand.display-block，而不是 hide() 和 show()，因為我在另一個具有相同 .reason html 標記的 Javascript 函式中使用 hide() 和 show() 。與上面的例子不同，最初
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>uj5u.com熱心網友回復：
看看你遇到的這個小例子。您有多個具有相同 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>所以當規則都具有相同的特殊性時。串列中的最后一個獲勝。由于最后一個不顯示，它們都被隱藏了。
當不需要時，您也在使用最接近的。您已記錄在案，因此無需再查找。
更改您的代碼以添加一個類來隱藏元素。使特異性更高，這樣您就不必處理重要的問題。
$(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>uj5u.com熱心網友回復：
如前所述，您不會洗掉帶有!important修飾符的類。事實上，你所有的類（這里）都這樣做，隨著你的應用程式的增長，這將是一個令人頭疼的問題。所有這些!important規則都會變得混亂。下面是一個簡化：相反的show()，并hide()可以簡單地使用一個toggle(evaluation)
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>uj5u.com熱心網友回復：
看起來你把不同種類的東西混為一談。
show()并且hide()是 JS 函式。您可以說：顯示找到搜索字串的所有內容。
.show-results并且.hide-results是 HTML 類。您可以說：將 show-results 添加到找到搜索字串的所有內容，并show-results使用 style定義類display: block。
display:none是一種 CSS 樣式。您可以說：將此樣式應用于未找到搜索字串的所有內容。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/387777.html
標籤：javascript 查询