我在一个职位列表网站上工作。我有一个搜索页面，用户可以在其中使用搜索栏查看所有职位发布和筛选职位。
在职位仪表板的顶部，我显示了页面上显示的职位总数。
假设在没有过滤器的情况下有 234 个职位空缺。如果用户键入“tech”，则该数字下降到 34 并超出 234 <li>元素，200个显示为none和 34 保留其原始值。
什么我有静态的
count = document.getElementsByClassName("job");
document.getElementById("number-jobs-total").innerHTML = count;
我在做什么
问题是 count是未定义的，你知道错在哪里吗？
const updateTotalJobs = () => {
count = document.getElementsByClassName("job");
var arr = Array.from(count);
for(var i = 0 ; i < arr.length ; i++){
if(arr[i].style.display=="none"){
count--;
}
}
console.log(count);
};
search.addEventListener("keyup", e =>{
filterJobs(e.currentTarget.value.trim());
updateTotalJobs();
});
HTML
跨度在第 4 行
<div class="job-listing">
<div class="container">
<div class="job-number">
<h2>We Found <span id="number-jobs-total" class="text-secondary"></span> Offers For <span>You</span> </h2>
</div>
<ul class="job-board">
<li class="job job-1">
<div class="job-title">
<h2>Process Engineer</h2>
</div>
<div class="job-location">
<p>Location: Naypyitaw</p>
</div>
<div class="job-type">
<p>Type: Full-Time</p>
</div>
<div class="job-date">
<p>Published on 07/19/2019</p>
</div>
<div class="job-industry">
<p>Engineering</p>
</div>
<ul class="job-keywords">
<li>Engineering</li>
<li>Science</li>
</ul>
</li>
<li class="job job-2">
<div class="job-title">
<h2>Chief Financial Officier</h2>
</div>
<div class="job-location">
<p>Location: Naypyitaw</p>
</div>
<div class="job-type">
<p>Type: Full-Time</p>
</div>
<div class="job-date">
<p>Published on 07/18/2019</p>
</div>
</li>
<li class="job job-3">
<div class="job-title">
<h2>Assistant CEO</h2>
</div>
<div class="job-location">
<p>Location: Naypyitaw</p>
</div>
<div class="job-type">
<p>Type: Part-Time</p>
</div>
<div class="job-date">
<p>Published on 07/18/2019</p>
</div>
</li>
<li class="job job-4">
<div class="job-title">
<h2>Front-End Developer</h2>
</div>
<div class="job-location">
<p>Location: Naypyitaw</p>
</div>
<div class="job-type">
<p>Type: Part-Time</p>
</div>
<div class="job-date">
<p>Published on 07/18/2019</p>
</div>
</li>
</ul>
<nav class="pagination-container">
<ul class="pagination">
<li><a href="javascript:void(0)">Previous</a></li>
<li><a href="javascript:void(0)">Next</a></li>
</ul>
</nav>
</div>
</div>
</div>
</body>
最佳答案
过滤器
您可以使用 filter 简单地获取项目计数并获取不等于 none 的项。
ES6 解决方案:
let count = [...document.getElementsByClassName("job")]
.filter(i => i.style.display != 'none').length
ES5 解决方案:
let count = Array.from(document.getElementsByClassName("job"))
.filter(i => i.style.display != 'none').length
在此示例中，第一个 Item 被隐藏，控制台将显示 Job Count: 3:
let count = [...document.getElementsByClassName("job")]
.filter(i => i.style.display != 'none').length
console.log('Job Count:', count)<div class="job-listing">
<div class="container">
<div class="job-number">
<h2>We Found <span id="number-jobs-total" class="text-secondary"></span> Offers For <span>You</span> </h2>
</div>
<ul class="job-board">
<li class="job job-1" style="display:none">
<div class="job-title">
<h2>Process Engineer</h2>
</div>
<div class="job-location">
<p>Location: Naypyitaw</p>
</div>
<div class="job-type">
<p>Type: Full-Time</p>
</div>
<div class="job-date">
<p>Published on 07/19/2019</p>
</div>
<div class="job-industry">
<p>Engineering</p>
</div>
<ul class="job-keywords">
<li>Engineering</li>
<li>Science</li>
</ul>
</li>
<li class="job job-2">
<div class="job-title">
<h2>Chief Financial Officier</h2>
</div>
<div class="job-location">
<p>Location: Naypyitaw</p>
</div>
<div class="job-type">
<p>Type: Full-Time</p>
</div>
<div class="job-date">
<p>Published on 07/18/2019</p>
</div>
</li>
<li class="job job-3">
<div class="job-title">
<h2>Assistant CEO</h2>
</div>
<div class="job-location">
<p>Location: Naypyitaw</p>
</div>
<div class="job-type">
<p>Type: Part-Time</p>
</div>
<div class="job-date">
<p>Published on 07/18/2019</p>
</div>
</li>
<li class="job job-4">
<div class="job-title">
<h2>Front-End Developer</h2>
</div>
<div class="job-location">
<p>Location: Naypyitaw</p>
</div>
<div class="job-type">
<p>Type: Part-Time</p>
</div>
<div class="job-date">
<p>Published on 07/18/2019</p>
</div>
</li>
</ul>
<nav class="pagination-container">
<ul class="pagination">
<li><a href="javascript:void(0)">Previous</a></li>
<li><a href="javascript:void(0)">Next</a></li>
</ul>
</nav>
</div>
</div>减少
我们也可以使用 reduce ，这只会做一些基本的加法。它不会返回数组并获取长度，而只会返回数字。
let count = [...document.getElementsByClassName("job")]
.reduce((val, i) => i.style.display != 'none' ? val + 1 : val, 0)
let count = [...document.getElementsByClassName("job")]
.reduce((val, i) => i.style.display != 'none' ? val + 1 : val, 0)
console.log('Job Count:', count)<div class="job-listing">
<div class="container">
<div class="job-number">
<h2>We Found <span id="number-jobs-total" class="text-secondary"></span> Offers For <span>You</span> </h2>
</div>
<ul class="job-board">
<li class="job job-1" style="display:none">
<div class="job-title">
<h2>Process Engineer</h2>
</div>
<div class="job-location">
<p>Location: Naypyitaw</p>
</div>
<div class="job-type">
<p>Type: Full-Time</p>
</div>
<div class="job-date">
<p>Published on 07/19/2019</p>
</div>
<div class="job-industry">
<p>Engineering</p>
</div>
<ul class="job-keywords">
<li>Engineering</li>
<li>Science</li>
</ul>
</li>
<li class="job job-2">
<div class="job-title">
<h2>Chief Financial Officier</h2>
</div>
<div class="job-location">
<p>Location: Naypyitaw</p>
</div>
<div class="job-type">
<p>Type: Full-Time</p>
</div>
<div class="job-date">
<p>Published on 07/18/2019</p>
</div>
</li>
<li class="job job-3">
<div class="job-title">
<h2>Assistant CEO</h2>
</div>
<div class="job-location">
<p>Location: Naypyitaw</p>
</div>
<div class="job-type">
<p>Type: Part-Time</p>
</div>
<div class="job-date">
<p>Published on 07/18/2019</p>
</div>
</li>
<li class="job job-4">
<div class="job-title">
<h2>Front-End Developer</h2>
</div>
<div class="job-location">
<p>Location: Naypyitaw</p>
</div>
<div class="job-type">
<p>Type: Part-Time</p>
</div>
<div class="job-date">
<p>Published on 07/18/2019</p>
</div>
</li>
</ul>
<nav class="pagination-container">
<ul class="pagination">
<li><a href="javascript:void(0)">Previous</a></li>
<li><a href="javascript:void(0)">Next</a></li>
</ul>
</nav>
</div>
</div>关于javascript - 根据样式更新数字，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57366068/