HTML：追加の検索フィルタコントロール

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() 
     }) 
    }) 

：前のすべてのものは、次のコードで作業していますフィルタは、その中に少なくとも一つのチェックボックスが次の写真

のように縁取りするようにしている設定されたときに、私は一つの形式でページを囲まれているので、これも働いている検索結果（。

は何が必要なのです

Iこの次のコードを使用しました：いくつかのフィルターが一度に選択されていて、私は

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

を使用して境界線を削除することができたときに

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

これは、それを維持するには、ここで私は質問のカップル

を持って接し

• 少なくとも1つの選択されたチェックボックスが存在する限り、境界線を維持し、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') 
    })