问题:
I've been working on a project where I can use a search term to filter out some div boxes. For example each div contains a number like 100, 200 or 300. When I 250 into the...
可以将文章内容翻译成中文,广告屏蔽插件会导致该功能失效:
问题:
I've been working on a project where I can use a search term to filter out some div boxes. For example each div contains a number like 100, 200 or 300. When I 250 into the search input, I need it to hide the divs that contain 100 and 200, as they are less than 250. Does this make sense?
This is what I have done so far:
<input type="text" id="search_value" onkeyup="search_filter()">
<div id="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">300</td>
</tr>
</table>
</div>
<div id="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">250</td>
</tr>
</table>
</div>
<div id="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">200</td>
</tr>
</table>
</div>
function search_filter() {
//Get Value of input & convert to Int
var s_value = document.getElementById("search_value").value;
s_value = parseInt(s_value);
//Get Value of in div and convert to Int
var d_value = document.getElementById("div_value").innerHTML;
d_value = parseInt(d_value);
//Hide Divs
if(s_value > d_value){
$(function(){
$(".container").hide();
document.getElementsByTagName(".container")[0].setAttribute("class", "hide_container");
});
}
else {
$(function(){
document.getElementsByTagName(".container")[0].setAttribute("class", "show_container");
});
};
}
I feel like I need to make each div unique but I'm not sure on how to go about creating a long list of div containers with numbers on a table that will hide.
Thanks
回答1:
You can loop through all the td with class div_value to compare the the text with the value of input element so that you can hide/show based on the condition.
Try with jQuery's .each()
the following way:
function search_filter(input) {
$('table tr td.div_value').each(function(){
if(Number($(this).text()) >= Number(input.value))
$(this).closest('.container').css({display: 'block'});
else
$(this).closest('.container').css({display: 'none'});
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="search_value" onkeyup="search_filter(this)">
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">300</td>
</tr>
</table>
</div>
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">250</td>
</tr>
</table>
</div>
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">200</td>
</tr>
</table>
</div>
Please Note: I will suggest you to ignore inline event listeners.
$('#search_value').on('keyup', function(){
var input = this;
$('table tr td.div_value').each(function(){
if(Number($(this).text()) >= Number(input.value))
$(this).closest('.container').css({display: 'block'});
else
$(this).closest('.container').css({display: 'none'});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="search_value">
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">300</td>
</tr>
</table>
</div>
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">250</td>
</tr>
</table>
</div>
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">200</td>
</tr>
</table>
</div>
回答2:
First, most of your selectors are incorrect.
Do not use multiple ids with the same value (container). Change to a class if you need the same name.
Also if you can use jQuery then use it everywhere, or dont use it at all.
function search_filter() {
//Get Value of input & convert to Int
var s_value = parseInt($("#search_value").val());
$('.container').each((i, element) => {
if (s_value > parseInt($(element).find('.div_value').text())) {
$(element).hide();
$(element).addClass('hide_container')
} else {
$(element).show();
$(element).addClass('show_container')
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="search_value" onkeyup="search_filter()">
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">300</td>
</tr>
</table>
</div>
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">250</td>
</tr>
</table>
</div>
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">200</td>
</tr>
</table>
</div>
回答3:
Using vanilla Javascript, I would solve it this way.
On every input
event on the <input />
, walk through the list of .div_value
, and set their closest('container')
's display
property accordingly.
const valueDivs = [...document.querySelectorAll('.div_value')]
search_value.addEventListener('input', () => {
for (const valueDiv of valueDivs) {
valueDiv.closest('.container').style.display =
Number(valueDiv.textContent) >= Number(search_value.value)
? 'block'
: 'none'
}
})
<label> Filter by number: <input type="number" min="0" id="search_value" /></label>
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">150</td>
</tr>
</table>
</div>
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">200</td>
</tr>
</table>
</div>
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">250</td>
</tr>
</table>
</div>
回答4:
Here's an example of using a forEach loop to show/hide the divs when you run your function. This uses vanilla javascript.
<input type="text" id="search_value" onkeyup="search_filter()">
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">300</td>
</tr>
</table>
</div>
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">250</td>
</tr>
</table>
</div>
<div class="container">
<table class="information">
<tr>
<td class="key">Info</td>
<td class="div_value">200</td>
</tr>
</table>
</div>
function search_filter() {
//Get Value of input & convert to Int
var s_value = document.getElementById("search_value").value;
s_value = parseInt(s_value);
//Get Value of in div and convert to Int
var d_value_containers = document.querySelectorAll(".container");
// Loop through divs and hide divs that have a lower value than the search term
d_value_containers.forEach(function(container){
var d_value = container.querySelector(".div_value");
var d_value_interger = parseInt(d_value.innerHTML);
if(s_value > d_value_interger) {
container.style.display = 'none';
} else {
container.style.display = 'block';
}
});
}