Мультифильтрация элементов по группам флажков

ProgramBox

Мультифильтрация элементов по группам флажков

Post author:admin
Запись опубликована:22 февраля, 2023
Post category:Вопросы по программированию

#javascript #jquery

Вопрос:

Я пытаюсь создать простой пользовательский интерфейс фильтра, используя этот код, но здесь у меня есть две проблемы.

1- Фильтры по цвету не работают, если вы начинаете с них. Они работают, если пользователь сначала фильтрует по форме

2- на фильтре по форме, если вы выберете square , он будет правильно фильтровать поля, но если вы снимите флажок square , он удалит все поля (что неверно, теперь он должен отображать все поля)

Что я делаю не так и как я могу это исправить?

 var checks = $('.shape,.color,.size'),
  boxes = $('.box')
checks.on('change', function() {
  var selector = checks.map(function(i) {
    var name = this.className,
      checked = $(":checked", this)
    if (checked.length === 0) checked = $(this).children()
    return checked.map(function() {
      return "[data-"   name   "='"   $(this).data(name)   "']"
    }).get().join(",")
  }).get()
  //console.log(selector)
  var okBoxes = boxes
  selector.forEach(function(sel) {
    okBoxes = okBoxes.filter(sel)
  })
   // animate to left
   
    okBoxes.show(500);
  boxes.not(okBoxes).hide(500)
});

 body{
  padding:40px;
}
.box{
float:left;
  margin:10px;
}
.red{
  background:red;
}
.green{
  background:green;}
.yellow{
  background:yellow;}
.diamond {

  height: 60px;
  text-align: center;
  transform:rotate(45deg) !important;
	width:60px;
}
.circle {

  height: 60px;
border-radius:50%;
	width:60px;
}
.square{
    height: 60px;
	width:60px;
}
.size input{
   display:none;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Filter By Shape
<hr />
<div class="shape">
   <div class="list-group">
        <input type="checkbox" name="shape" data-shape="square">square
  <input type="checkbox" name="shape" data-shape="circle">circle
  <input type="checkbox" name="shape" data-shape="diamond">diamond
   </div>

</div>
<hr />
<br />
Filter By Color
<hr />
<div class="color">
  <input type="checkbox" name="color" data-color="red">Red
  <input type="checkbox" name="color" data-color="yellow">yellow
  <input type="checkbox" name="color" data-color="green">green
</div>
<br />
<div class="row map">
  <div class="col-md-2 animated box red square" data-shape="square" data-color="red" data-size="50">50</div>
  <div class="col-md-2 animated box green circle" data-shape="circle" data-color="green" data-size="51">51</div>
  <div class="col-md-2 animated box yellow diamond" data-shape="diamond" data-color="yellow" data-size="50">50</div>
  <div class="col-md-2 animated box red diamond" data-shape="diamond" data-color="red" data-size="50">50</div>
  <div class="col-md-2 animated box green circle" data-shape="circle" data-color="green" data-size="51">51</div>
  <div class="col-md-2 animated box yellow square" data-shape="square" data-color="yellow" data-size="50">50</div>
  <div class="col-md-2 animated box red diamond" data-shape="diamond" data-color="red" data-size="50">50</div>
  <div class="col-md-2 animated box green circle" data-shape="circle" data-color="green" data-size="51">51</div>
  <div class="col-md-2 animated box yellow circle" data-shape="circle" data-color="yellow" data-size="50">50</div>
  <div class="col-md-2 animated box red diamond" data-shape="diamond" data-color="red" data-size="52">52</div>
  <div class="col-md-2 animated box green diamond" data-shape="diamond" data-color="green" data-size="51">51</div>
  <div class="col-md-2 animated box yellow square" data-shape="square" data-color="yellow" data-size="54">54</div>
  <div class="col-md-2 animated box red diamond" data-shape="diamond" data-color="red" data-size="50">50</div>
  <div class="col-md-2 animated box green diamond" data-shape="diamond" data-color="green" data-size="51">51</div>
  <div class="col-md-2 animated box yellow diamond" data-shape="diamond" data-color="yellow" data-size="54">54</div>
  <div class="col-md-2 animated box red square" data-shape="square" data-color="red" data-size="50">50</div>
  <div class="col-md-2 animated box green square" data-shape="square" data-color="green" data-size="51">51</div>
  <div class="col-md-2 animated box yellow diamond" data-shape="diamond" data-color="yellow" data-size="52">52</div>
  <div class="col-md-2 animated box red diamond" data-shape="diamond" data-color="red" data-size="53">53</div>
  <div class="col-md-2 animated box green square" data-shape="square" data-color="green" data-size="51">51</div>
  <div class="col-md-2 animated box yellow diamond" data-shape="diamond" data-color="yellow" data-size="54">54</div>
  <div class="col-md-2 animated box red circle" data-shape="circle" data-color="red" data-size="50">50</div>
  <div class="col-md-2 animated box green square" data-shape="square" data-color="green" data-size="51">51</div>
  <div class="col-md-2 animated box yellow diamond" data-shape="diamond" data-color="yellow" data-size="52">52</div>
</div>

Ответ №1:

Скрипт не будет работать, если вы добавите дополнительные классы в свои группы фильтров, и если вы измените структуру html с помощью всего лишь крошечного бита, это тоже будет тормозить.

Вот ваш рабочий пример, но я не буду предлагать использовать его в долгосрочной перспективе.

 var checks = $('.shape,.color,.size'),
  boxes = $('.box')
checks.on('change', function() {
  
  
  var selector = checks.map(function(i) {
    var name = this.className,
      checked = $(":checked", this)
    if (checked.length === 0) checked = $(this).children()
    return checked.map(function() {
      return "[data-"   name   "='"   $(this).data(name)   "']"
    }).get().join(",")
  }).get()
  //console.log(selector)
  var okBoxes = boxes
  selector.forEach(function(sel) {
    okBoxes = okBoxes.filter(sel)
  })
   // animate to left
   
    okBoxes.show(500);
  boxes.not(okBoxes).hide(500)
});

 body{
  padding:40px;
}
.box{
float:left;
  margin:10px;
}
.red{
  background:red;
}
.green{
  background:green;}
.yellow{
  background:yellow;}
.diamond {

  height: 60px;
  text-align: center;
  transform:rotate(45deg) !important;
	width:60px;
}
.circle {

  height: 60px;
border-radius:50%;
	width:60px;
}
.square{
    height: 60px;
	width:60px;
}
.size input{
   display:none;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="filters">
    Filter By Shape
    <hr />
    <div class="shape" data-group="shape">
        <input type="checkbox" name="shape" data-shape="square">square
        <input type="checkbox" name="shape" data-shape="circle">circle
        <input type="checkbox" name="shape" data-shape="diamond">diamond
    </div>

    <hr />
    <br />
    Filter By Color
    <hr />
    <div class="color" data-group="color">
        <input type="checkbox" name="color" data-color="red">Red
        <input type="checkbox" name="color" data-color="yellow">yellow
        <input type="checkbox" name="color" data-color="green">green
    </div>
</div>
<br />
<div class="row map">
  <div class="col-md-2 animated box red square" data-shape="square" data-color="red" data-size="50">50</div>
  <div class="col-md-2 animated box green circle" data-shape="circle" data-color="green" data-size="51">51</div>
  <div class="col-md-2 animated box yellow diamond" data-shape="diamond" data-color="yellow" data-size="50">50</div>
  <div class="col-md-2 animated box red diamond" data-shape="diamond" data-color="red" data-size="50">50</div>
  <div class="col-md-2 animated box green circle" data-shape="circle" data-color="green" data-size="51">51</div>
  <div class="col-md-2 animated box yellow square" data-shape="square" data-color="yellow" data-size="50">50</div>
  <div class="col-md-2 animated box red diamond" data-shape="diamond" data-color="red" data-size="50">50</div>
  <div class="col-md-2 animated box green circle" data-shape="circle" data-color="green" data-size="51">51</div>
  <div class="col-md-2 animated box yellow circle" data-shape="circle" data-color="yellow" data-size="50">50</div>
  <div class="col-md-2 animated box red diamond" data-shape="diamond" data-color="red" data-size="52">52</div>
  <div class="col-md-2 animated box green diamond" data-shape="diamond" data-color="green" data-size="51">51</div>
  <div class="col-md-2 animated box yellow square" data-shape="square" data-color="yellow" data-size="54">54</div>
  <div class="col-md-2 animated box red diamond" data-shape="diamond" data-color="red" data-size="50">50</div>
  <div class="col-md-2 animated box green diamond" data-shape="diamond" data-color="green" data-size="51">51</div>
  <div class="col-md-2 animated box yellow diamond" data-shape="diamond" data-color="yellow" data-size="54">54</div>
  <div class="col-md-2 animated box red square" data-shape="square" data-color="red" data-size="50">50</div>
  <div class="col-md-2 animated box green square" data-shape="square" data-color="green" data-size="51">51</div>
  <div class="col-md-2 animated box yellow diamond" data-shape="diamond" data-color="yellow" data-size="52">52</div>
  <div class="col-md-2 animated box red diamond" data-shape="diamond" data-color="red" data-size="53">53</div>
  <div class="col-md-2 animated box green square" data-shape="square" data-color="green" data-size="51">51</div>
  <div class="col-md-2 animated box yellow diamond" data-shape="diamond" data-color="yellow" data-size="54">54</div>
  <div class="col-md-2 animated box red circle" data-shape="circle" data-color="red" data-size="50">50</div>
  <div class="col-md-2 animated box green square" data-shape="square" data-color="green" data-size="51">51</div>
  <div class="col-md-2 animated box yellow diamond" data-shape="diamond" data-color="yellow" data-size="52">52</div>
</div>

Вопрос:

Ответ №1:

Вам также может понравиться

Передать массив setFlashdata в перенаправление codeigniter4

Python, выдает ошибку при использовании np.dstack и не может ее решить

Есть ли способ сделать так, чтобы папки отображались сверху в Dreamweaver CC 2021?