如何使用纯javascript过滤元素？

Question

问题

我制作了一个小脚本，让我们的复选框过滤其类名的元素。它有点工作，但当我点击一个不是第一个或第二个的复选框时，它都会崩溃。我不明白为什么，但它只是。有人能指出我正确的方向吗？

代码

A fiddle。

HTML：

<div class="filters">
    Filters:
    <input type="checkbox" class="filter" id="cat1-filter" data-filter="cat1">
    <label for="cat1-filter">category 1</label>

    <input type="checkbox" class="filter" id="cat2-filter" data-filter="cat2">
    <label for="cat2-filter">category 2</label>

    <input type="checkbox" class="filter" id="cat3-filter" data-filter="cat3">
    <label for="cat3-filter">category 3</label>

    <input type="checkbox" class="filter" id="cat4-filter" data-filter="cat4">
    <label for="cat4-filter">category 4</label>
</div>

<a href="#" class="item cat1">
    <h3>Item 1</h3>
</a>

<a href="#" class="item cat1 cat3">
    <h3>Item 2</h3>
</a>

<a href="#" class="item cat2">
    <h3>Item 3</h3>
</a>

<a href="#" class="item cat1 cat2 cat4">
    <h3>Item 4</h3>
</a>

Javascript：

// Make filters react
var filters = document.getElementsByClassName('filter');
for (var i = 0; i < filters.length; i++) {
    filters[i].addEventListener('change', filter);
};

function filter () {
    // Hide all posts by default
    var posts = document.getElementsByClassName('item');
    for (var i = 0; i < posts.length; i++) {
        posts[i].style.display = 'none';
    };

    // Run through all filters
    for (var i = 0; i < filters.length; i++) {
        // Check if filter is active
        if (filters[i].checked){
            // Get current filter name
            var curFilter = filters[i].getAttribute('data-filter');
            // Get all matching elements
            var visiblePosts = document.getElementsByClassName(curFilter);
            for (var i = 0; i < visiblePosts.length; i++) {
                // Show every matching element
                visiblePosts[i].style.display = 'inline-block';
            };
        }
    };
}

Answer 1

Java脚本没有块级别范围，如java和其他经典语言。变量 i 具有全局范围，这就是通过循环更改相同值的原因。我认为通过在java脚本中使用Closure Concept或为每个循环变量初始化（i，j，k，l）分配不同的变量名，我们可以解决这个问题，如下例所示。

example