HTML:附加搜索筛选器控件
HTML:附加搜索筛选器控件
提问于 2017-11-10 11:05:30
我使用Node.js作为后端，JQuery作为前端，我有一个带有过滤器的搜索框作为复选框，下面是下一张图片。
现在，当我单击过滤器时，它将被添加到一个已使用的过滤器列表中，该列表也是作为图像提供的。
然后，当我单击过滤器旁边的x时，它将被删除，也不被选中。在下一段代码中，所有的prev操作都在进行：
$('[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被选中？请注意，有多个过滤器设置！
- 我认为这可能是一个供人们使用的库(当然还有一些调整)。我该从哪里开始呢？
- 有什么更好的应用整个程序吗？添加过滤器，删除复选框？
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-11-10 11:31:24
让我知道如果这有效，我很遗憾无法测试它：
$('[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')
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47221369
复制相关文章
相似问题
腾讯云开发者
