我使用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时才删除边框？ 请注意，有多个过滤器设置！ 我认为这可能是一种供人们使用的图书馆（当然会有一些调整）。 我从哪里开始呢？ 有没有更好的应用这整个过程？ 添加过滤器，删除复选框？I am using Node.js as a backend and JQuery as a frontend and I have a search box with filters as checkboxes below it see the next image Now when I click on the filter it will be added to a used filter list also provided as an image
Then when i click on the x next to the filter it will be deleted and also unchecked. all of the prev things are working in the next code:
$('[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() }) })As I said it's working and good so far, what should happen next is when you click on search it will take all checkboxes and post them to get some search results (this is also working since I surrounded the page with one form.
What I need is when the filters set has at least one checkbox inside it to be bordered like the next photo
I did this using the following piece of code:
$('[aria-controls="'+$(this).data('key')+'-facets"]').addClass('has-selected')This will keep it bordered whenever some filter has been selected once and I can remove the border using
$('[aria-controls="'+$(this).data('key')+'-facets"]').removeClass('has-selected')Here I have couple of questions
how to keep the border as long as there is at least one selected checkbox and remove it only when there are 0 selected? please note that there is more than one filters set! I think this could be some sort of a library for people to use (with some adjustments of course). Where do I start with this? Is there any better to apply this whole procedure? adding a filter , removing the checkbox?最满意答案
让我知道如果这个工程，我可悲的不能测试它：
$('[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') })Let me know if this works, I sadly can't test it:
$('[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') })更多推荐
发布评论