如何使用网址参数过滤图库

Question

这个问题是Webmasters Stack Exchange的migrated，因为可以在Stack Overflow上回答。Migrated<< [2小时前。

我正在为我的投资组合创建一个商务站点，并且我的页面上有我想为其添加过滤器的产品卡片库。卡是使用json文件动态生成的。

我可以仅使用javascript和CSS来解决这个问题，但是在查看其他网站时，我注意到您随后触发了它们的过滤器，将参数附加到网址或从网址中删除。

这是我此页面的JavaScript。如您所见，我已经使用了通过附加到url将您带到单个项目的函数，但是我不知道如何对过滤器执行此操作。

// ========== Load Gallery Images ========================================
$.getJSON("../../json/guitars.json", function(data) {

  var guitar_data = '';

  for(var i in data) {
    // data
    var image1 = data[i].img1
    var alt = data[i].alt
    var title = data[i].title // use for sort-by
    var price = data[i].price

    // filters
    var id = data[i].product_id
    var category = data[i].category
    var brand = data[i].brand
    var condition = data[i].condition

    guitar_data += '<div class="gallery-card">'
    guitar_data += `<img class="more-info img-fluid" src="../${image1}" alt="${alt}">`
    guitar_data += `<h6>${title}</h6>`
    guitar_data += `<p><strong>${price}</strong></p>`
    guitar_data += '</div>'
  }

  $('#img-gallery').html(guitar_data)
})
// ========== Load Gallery Images End ====================================

$(document).ready(function() {
  // ======== More Info ==================================================
  $(".more-info").on("click", function(e) {

    const product_id = $(e.target).attr('product_id')

    $.getJSON("../../json/guitars.json", function(json) {
      for(let i in json) {
        if (product_id === json[i].product_id ) {
          window.location.href = "./product.html?product=" + product_id
        }
      }
    })
  })
  // ======== More Info End ===============================================

这里是我的过滤器之一
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
                    <div class="card-body" style="border:none;">
                      <ul style="list-style:none;padding-left:5px;">
                        <li>
                          <input type="checkbox" name="brand" value="fender">
                          <label style="padding-left:10px;" for="">Fender</label>
                        </li>
                        <li>
                          <input type="checkbox" name="brand" value="gibson">
                          <label style="padding-left:10px;" for="">Gibson</label>
                        </li>
                        <li>
                          <input type="checkbox" name="brand" value="gretsch">
                          <label style="padding-left:10px;" for="">Gretsch</label>
                        </li>
                      </ul>
                    </div>
                  </div>

我不是要任何人提供代码，而只是要求方向。我现在有点迷路。

Answer 1

您可以将相关的html布局用FORM包裹在method="GET"中，并在每次过滤器单击时调用表单的submit()。

通过这种方式，每个选定的字段都会更新URL参数，即查询字符串。