使用jQuery动态添加/删除搜索过滤器

Question

我目前正在尝试将post过滤器部分构建到一个网站中，并且需要在JavaScript/jQuery方面提供一些帮助。下面您可以看到一个可视化的布局和html布局的例子。

事件的顺序如下：

• 用户从过滤器的顶部列表中进行选择(在选中之前，底部标记不可见)
• 选中后，“选中的标签筛选器从顶部列表中消失，并添加到底部(”循环标记“)”。
• 用户还可以删除标记，它们将返回到过滤器的顶部列表。

就像我想象的那样：

选择滤波器

• 检查“复选框”
• 将选中的“复选框”标签+值属性添加到数组中
• 获取最后一个添加到数组中的值，并在content容器下面创建新的filter标记。

移除过滤器

• 用户单击要删除的标记上的小x。
• 标签被移除，添加回过滤器的顶部列表，并从数组中删除。

​

​

<div class="blog-feed-filters">
                <h5>FILTER</h5>

                <div class="checkbox">
                    <input class="checkbox-active" id="check1" type="checkbox" name="filter" value="1">
                    <label for="check1">Turas Application Updates</label>
                    <br>
                    <input class="checkbox-active" id="check2" type="checkbox" name="filter" value="2">
                    <label for="check2">General News</label>
                    <br>
                    <input class="checkbox-active" id="check3" type="checkbox" name="filter" value="3">
                    <label for="check3">Organisation Updates</label>
                    <br>
                    <input class="checkbox-active" id="check4" type="checkbox" name="filter" value="4">
                    <label for="check4">UI Updates</label>
                </div>
                <hr />
                <div id="content-tag-container">
                    <div class="content-tag">Update <a href="">✕</a></div>
                    <div class="content-tag">Mobile Applications <a href="">✕</a></div>
                    <div class="content-tag">New website update <a href="">✕</a></div>
                    <div class="content-tag">Update <a href="">✕</a></div>
                </div>
            </div> 

JavaScript/ Jquery --请原谅这里的混乱。我是个菜鸟

$('.checkbox-active').click(function () {

//check to see if the checkbox has been "checked"
if (document.getElementById('check1').checked) {

    var filtersSelected = [];

    //get the item that has been checked and add it to an array
    $.each($("input[name='filter']:checked"), function () {
        filtersSelected.push($(this).val() + $("label[for='checkbox-active']").innerText);
    });
    //find the last item in the array
    if (!Array.prototype.last) {
        Array.prototype.last = function () {
            return this[this.length - 1];
        };
    };
    //create a new filter tag and add it to the content-tag-container div 
    for (var c in filtersSelected.last()) {
        var newElement = document.createElement('div');
        newElement.className = "content-tag";
        newElement.innerHTML = "<a href=''>" + "✕" + "</a>";
        document.getElementById("content-tag-container").appendChild(newElement);
    };

}

});

任何帮助都是非常感谢的。干杯

Answer 1

我在您的javascript中做了一些修改：

$(document).ready( function() {
    $('.checkbox-active').click(
            function() {
                //console.log("Hi");
                //check to see if the checkbox has been "checked"


                    var filtersSelected = [];
                    //console.log($("input[name='filter']:checked"));

                    //get the item that has been checked and add it to an array
                    var pushed=false;
                    $.each($("input[name='filter']:checked"), function() {
                        //console.log( );
                        filtersSelected.push($(this).val() + $("label[for='"+$(this).attr('id')+"']").text());
                        $("label[for='"+$(this).attr('id')+"']").remove();
                        $(this).remove();
                        pushed=true;
                    });
                    console.log(filtersSelected);
                    //find the last item in the array
                    if (!Array.prototype.last) {
                        Array.prototype.last = function() {
                            return this[this.length - 1];
                        };
                    }
                    ;
                    //create a new filter tag and add it to the content-tag-container div 
                    if(pushed){
                    var c = filtersSelected.last(); 
                        var newElement = document.createElement('div');
                        newElement.className = "content-tag";
                        newElement.innerHTML = c + "<a href=''>" + "X" + "</a>";
                        document.getElementById("content-tag-container")
                                .appendChild(newElement);
                    }


            });
});

以上代码部分运行以在筛选列表中添加选中的值。用上述代码替换您的javascript。