Question

我使用Node.js作为后端，JQuery作为前端，我有一个带过滤器的搜索框作为下方的复选框，看到下一张图片现在，当我点击过滤器时，它将被添加到也作为图像提供的使用过滤器列表中

然后，当我点击过滤器旁边的x时，它将被删除并取消选中。所有流行的东西都在下一个代码中工作：

$('[id^="facet-"]').on('change',function(){
        let xMark = '<i id="'+$(this).attr('id')+'-remove-filter" class="fa fa-times-circle" aria-hidden="true"></i>'
        let key = $(this).data('key')
        let keyVal = '<div id="'+$(this).attr('id')+'-span" class="btn"><span>'+$(this).data('key')+ ' > ' +$(this).data('value')+'</span>'+xMark+'</div>'
        if($(this).is(':checked')){
            $('.'+key+'-filters').append(keyVal)
        }else{
            $('#'+$(this).attr('id')+'-span').remove()
        }
        $('i[id$="-remove-filter"]').on('click',function(){
            let checkboxId = $(this).attr('id').split('-remove-filter')[0]
            $('#'+checkboxId).prop('checked', 0)
            $(this).parent().remove()
        })
    })

正如我所说它到目前为止工作和良好，接下来会发生什么，当你点击搜索它将采取所有复选框并发布它们以获得一些搜索结果（这也是有效的，因为我用一个表格包围页面。

我需要的是当过滤器集中至少有一个复选框时，它会像下一张照片一样被镶边

我使用以下代码完成了此操作：

$('[aria-controls="'+$(this).data('key')+'-facets"]').addClass('has-selected')

只要选择了一次过滤器并且我可以使用

删除边框，这将使其保持边界

$('[aria-controls="'+$(this).data('key')+'-facets"]').removeClass('has-selected')

这里我有几个问题

只要至少有一个选中的复选框，如何保留边框，只有在选中0时才将其删除？请注意，设置了多个过滤器！
我认为这可能是一种供人们使用的图书馆（当然会有一些调整）。我从哪里开始呢？
有没有更好的方法来应用这整个程序？添加过滤器，删除复选框？

Answer 1

让我知道如果这有效，我很遗憾无法测试它：

$('[id^="facet-"]').on('change',function(){
        var id = $(this).attr('id')
        var key = $(this).data('key')
        var value = $(this).data('value')
        if($(this).is(':checked')){
            let xMark = $('<i id="'+id+'-remove-filter" class="fa fa-times-circle" aria-hidden="true"></i>')
            let keyElement = $('<div id="'+id+'-span" class="btn"><span>'+key+ ' > ' +value+'</span></div>')
            $('.'+key+'-filters').append(keyElement)
            keyElement.append(xMark)
            xMark.bind('click',function(){
                let checkboxId = id.split('-remove-filter')[0]
                $('#'+checkboxId).prop('checked', 0).change()
                // adding the change() method here will trigger the event all over again to control adding/removing class
                $(this).parent().remove()
            })
        }else{
            $('#'+id+'-span').remove()
        }
        var panel = $('[aria-controls="'+key+'-facets"]')
        var checked_num = panel.find('input[type=checkbox]:checked').length
        if(checked_num>0)
            panel.addClass('has-selected')
        else
            panel.removeClass('has-selected')
    })

HTML：其他搜索过滤器控件

1 个答案: