Saya mencantumkan item untuk dijual di sebuah situs, dan saya ingin memiliki bilah sisi untuk memfilter item. Jadi untuk setiap atribut, di bagian filter saya ingin membuat daftar setiap nilai unik, dan menunjukkan jumlah nilai yang ada.

Sebagai contoh yang sangat sederhana, dalam cuplikan di bawah ini, ada empat mobil yang terdaftar, dengan atribut data untuk jumlah pintu. Untuk membiarkan orang memfilter berdasarkan jumlah pintu, saya perlu menunjukkan setiap opsi di bilah sisi dan membiarkan mereka memeriksanya.

Masalahnya bagi saya adalah untuk beberapa atribut, saya tidak tahu nilai apa yang akan ada sebelumnya. Jadi saya perlu beberapa cara untuk mengulang setiap item, mencatat setiap nilai unik untuk atribut itu, dan juga menghitung instance dari setiap nilai, dan menampilkannya di sidebar "Filter By".

Inilah yang akan terlihat seperti bilah sisi dalam contoh:

Pintu:
[] 2 (2)
[] 4 (1)
[] 5 (1)

Sepertinya saya perlu menggunakan .each() dan .length(), tetapi saya mengalami kesulitan untuk menggabungkannya. Saya tidak kesulitan memfilter item setelah kotak centang dicentang, tetapi masalah saya hanya mencantumkan semua opsi filter.

<div class="items-list">
  <p class="item" data-doors="2">Ford Mustang</p>
  <p class="item" data-doors="5">Nissan Versa</p>
  <p class="item" data-doors="4">Honda Civic</p>
  <p class="item" data-doors="2">Audi A5</p>
</div>
0
lamb321001 6 Juni 2021, 21:27

2 jawaban

Jawaban Terbaik

Ini mengatur objek dengan pasangan kunci/nilai kunci menjadi jumlah pintu, nilainya adalah berapa banyak contoh dari mereka. Kemudian ia menjalankan objek itu melalui iterasi yang menerapkan pasangan nilai kunci ke input kotak centang.

const createCheckboxes = (dataName) => {
  let refobj = {};
  $('.items-list .item').each(function() {
    let d = $(this).data(dataName);
    refobj[d] = refobj[d] ? refobj[d] + 1 : 1;
  });

  Object.entries(refobj).forEach(set => $('.inputs[data-group="' + dataName + '"]').append(getCheckbox(set, dataName)));

}

const getCheckbox = (data, keyname) => {
  const [key, value] = data;
  return `
<label>
<input type='checkbox' name='${keyname}[]' class='${keyname}' value='${key}' onclick='testinput(this)' /> ${key} (${value})
</label>`
}

const testinput = (el) => {
  console.log('input with class: ' + $(el).attr('class') + '  and value: ' + $(el).val() + ' and name: ' + $(el).attr('name') + ' clicked')
}
createCheckboxes('doors');
createCheckboxes('wheels');
label {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="items-list">
  <p class="item" data-doors="2" data-wheels="4">Ford Mustang</p>
  <p class="item" data-doors="5" data-wheels="4">Nissan Versa</p>
  <p class="item" data-doors="4" data-wheels="4">Honda Civic</p>
  <p class="item" data-doors="2" data-wheels="4">Audi A5</p>
  <p class="item" data-doors="1" data-wheels="3">Messerschmitt KR200</p>
</div>

<div class='inputs' data-group="doors">How many doors?</div>

<div class='inputs' data-group="wheels">How many wheels?</div>
1
Kinglish 6 Juni 2021, 22:44

filterObj terakhir (dalam kode di bawah) menyimpan apa yang Anda cari.

const list = document.getElementsByClassName('item');
//Converting HTMLNode list to Array.
const arrList = Array.from(list);

const filterObj = {};
arrList.map(el => {
    filterObj[el.dataset.doors] = filterObj[el.dataset.doors] 
    ? filterObj[el.dataset.doors] + 1 
    : 1;
});

console.log(filterObj);
<div class="items-list">
  <p class="item" data-doors="2">Ford Mustang</p>
  <p class="item" data-doors="5">Nissan Versa</p>
  <p class="item" data-doors="4">Honda Civic</p>
  <p class="item" data-doors="2">Audi A5</p>
</div>
1
Dharman 6 Juni 2021, 18:51