如何使用 PHP, JS 将二级过滤添加到过滤结果

Question

我的网站上有一个页面，用户可以在其中 select 框 return 基于他们的 select 离子的查询。例如，我的 header 看起来像：

_Burgers _Fries _Beverage _small _medium _large

第一行效果很好，如果用户 select 汉堡，它 return 只是汉堡餐，如果他们 select 汉堡和饮料它 return只有餐点有汉堡和饮料等

例如，如果页面如下所示：

X Burgers X Fries _ Beverage _small _medium _large

正在 returning:

Burger & Fries Meal Combo #1 (small) Burger & Fries Meal Combo #1 (medium) Burger & Fries Meal Combo #1 (large) Burger & Fries Meal Combo #2 (small) Burger & Fries Meal Combo #2 (medium) Burger & Fries Meal Combo #2 (large)

我遇到的问题是弄清楚如何添加第二级过滤器，这样如果用户 selects "small"，它只会 returns 小组合选项.

我使用的是 MODX CMS，所以我的着陆页具有以下代码（[[whatever]] 只是对数据库的查询 return 结果 div）：

<div class="combo-hide-me" id="default">[[!comboLanding? &filter=`default`]]</div>
<div class="combo-hide-me" id="burger_div_id" style="display: none;">[[!comboLanding? &filter=`b`]]</div>
<div class="combo-hide-me" id="fries_div_id" style="display: none;">[[!comboLanding? &filter=`f`]]</div>
<div class="combo-hide-me" id="beverage_div_id" style="display: none;">[[!comboLanding? &filter=`b`]]</div>
<div class="combo-hide-me" id="beveragefries_div_id" style="display: none;">[[!comboLanding? &filter=`bf`]]</div>
etc..

我的 javascript 看起来像：

// combo checkbox selction
$(document).ready(function () {
packageOutput();
});

function packageOutput() {

// set the main div to return filtered results
var packageDiv = $(".plans-container");

// set empty array
var idArr = [];

// get the checked values
var checked = $(".active");

// loop and build array
checked.each(function () {
    idArr.push($(this).prop("id"));
});

// remove whitespace in array
var trimArray = idArr.join("");

// function below    
toggleShowHide(trimArray, packageDiv);
}

function toggleShowHide(arr, elem) {

// determine if there are boxes checked
var arrLen = arr.length;

// clear last selected item
$(".combo-hide-me").hide();

// set default if array is empty
if (arrLen < 1 ){

    //function below
    setDefault(elem);
}

// run the show hide based on array of selection
for(i = 0; i < arrLen; i++) {

    // set the div name from array
    var temp = "#" + arr + "_div_id";

    $(temp).show();
    $("#default").hide();
} 

// unhide
elem.show();
}

function setDefault(elem){
$("#default").show();
}

提前感谢您提供的有关让二级过滤器正常工作的任何指导。

编辑：我刚刚意识到我没有为小、中、大的 select 框添加代码：

<div class="sizes" id="size_div_id">
<h4>Combo Sizes:</h4>
  <div class="checks">

    <div class="selection">
      <input type="checkbox" id="small" name="combosize">
      <label for="small"><span></span>Small</label>
    </div>

    <div class="selection">
      <input type="checkbox" id="medium" name="combosize">
      <label for="medium"><span></span>Medium</label>
    </div>

    <div class="selection">
      <input type="checkbox" id="large" name="combosize">
      <label for="large"><span></span>Large</label>
    </div>

  </div>
</div>

Answer 1

我能够通过将以下代码插入我的 javascript;

来解决二级过滤问题

$(".classes input[type='checkbox']").click(function(e) {
       var innerTextHTML = $(this).parent("div.selection").children('label').text();
       var planWrap = $("div.plan."+innerTextHTML).parent();

       if ($(this).is(':checked')){
             planWrap.show();
       }else{
             planWrap.hide();
       }
});

我在使用它时遇到的一个问题是第 n 行样式，我可以使用 jquery 分离来解决这个问题。

如何使用 PHP, JS 将二级过滤添加到过滤结果

How to add second level filtering to filtered results using PHP, JS

javascript

php

modx