Question

我目前正在尝试在网站中构建一个后期过滤器部分，并需要一些与它一起使用的JavaScript / jQuery的帮助。您可以在下面看到可视化布局和html布局的示例。

事件顺序如下：

用户从顶部过滤器列表中选择（底部标签在选中之前不可见）
选择后，“选定的标签过滤器会从顶部列表中消失，并添加到底部（”圆形标签“）”。
用户还可以删除标签，然后返回顶部的过滤器列表。

我想象这种方式的工作方式：

选择过滤器

检查“已选中复选框”
将选定的“复选框”标签+值属性添加到数组
获取添加到数组的最后一个值，并在内容标记容器

删除过滤器

用户点击要删除的代码上的小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请原谅这个烂摊子。我是个菜鸟：D

$('.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。

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

1 个答案: