Динамическое добавление/удаление поисковых фильтров с помощью jQuery

Question

В настоящее время я пытаюсь создать раздел фильтра сообщений на веб-сайте и нуждаюсь в некоторой помощи с JavaScript/jQuery, который сопровождает его. Ниже вы можете увидеть пример макета визуально и макет html.

Последовательность событий будет идти следующим образом:

• Пользователь выбирает из верхнего списка фильтров (нижние метки не видны, пока не выбрано)
• После выбора «выбранный тег фильтр исчезнет из верхней список и добавляется в нижнюю часть («круговые теги») ».
• пользователь может также удалить теги, и они вернутся в верхний список фильтров.

Как я представлял себе эту работу:

Выбор фильтра Проверка

• для "проверенного флажок"
• добавить выбранный "флажок" ярлык + значение атрибута в массиве
• получить последние значения, добавленные в массив, и создать новый тег фильтра под контейнером тегов контента

Удаление фильтра

• пользователь нажимает маленькие х на теге они хотят, чтобы удалить
• тег удаляется добавляется обратно к началу списка фильтров и удаляется из массива

<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 Пожалуйста, извините за беспорядок. Я noob: 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 на вышеуказанный код.