根據樣式更新數字

Question

我在一個職位列表網站上工作。 我有一個搜索頁面，用戶可以在其中查看所有職位發布並使用搜索欄過濾職位。

在工作儀表板的頂部，我顯示了頁面上顯示的工作總數。

假設沒有過濾器，有 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>

Answer 1

篩選

您可以通過使用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>

Answer 2

Document.getElementsByClassName()返回一個類似數組的對象，而不是一個數字。 嘗試將計數設置為等於長度。

Answer 3

使用類進行此計算會更容易。 您可以簡單地查詢這兩個類，結果集計數的差異將是您要查找的值。

.hide-job{
     display:none;
   }

const updateTotalJobs = () => {
    count = document.querySelectorAll('.job').length - document.querySelectorAll('.hide-job').length
    console.log(count);
};

Answer 4

解決方案：

您正在減少實際上是一個數組的計數。 這是我在您的代碼中看到的唯一錯誤。 但它仍然可以按照其他解決方案中的建議進行優化。

const updateTotalJobs = () => {
  arr = document.getElementsByClassName("job");
  count = arr.length;
  for(var i = 0 ; i < arr.length ; i++){
    if(arr[i].style.display=="none"){
        count--;
    }
  }
  console.log(count);
}