多个复选框过滤javascript和Django

Question

我正在尝试使用复选框来过滤我在 html 页面上的结果。通过 django 视图将我的数据传递到列表中，然后通过这样的循环：

</div>
{% for r in rows %}
    <div class="res_show">
        <div class="btitle">
        <a href="/show_business/{{r.b_id}}/"><p style="text-align:left"><b>{{r.name}}</b></p></a>
        </div>
        <div class="baddress">
        <p>{{r.address}}</p>
        </div>
        <div class="reviewstar">
        {% if user.is_authenticated %}
            <a href="/apply_review/{{r.b_id}}/"><p style="text-align:left"><span class="fa fa-star checked"></span> {{r.stars}} ({{r.r_count}})</p></a>
        {% else %}
            <p style="text-align:left"><span class="fa fa-star checked"></span> {{r.stars}} ({{r.r_count}})</p>
        {% endif %}
        </div>
        <div class="b_category">
            <p style="text-align: left"> <b>{{r.category}}</b></p>
        </div>
        <div class="diraddress">
        <a href="/show_directions/{{r.id}}/"><p style="text-align:left">{{r.duration}}'     {{r.distance}} χλμ <b>{{r.open}}</b></p></a>
        </div>
        <hr style="border:3px solid #333333">
    </div>

我想使用这个类进行过滤：

<div class="b_category">
        <p style="text-align: left"> <b>{{r.category}}</b></p>
    </div>

类别有 4 个可能的值：cafe、bar、nigh_club、restaurant

我找到了以下代码，但我不知道应该更改什么才能在我的代码中工作：

http://jsfiddle.net/x1av5809/

类别可能包含多个以逗号分隔的值，例如 酒吧或咖啡厅，酒吧 一个使用示例是选择栏复选框并仅显示包含类别栏的结果。我选择了酒吧和咖啡馆复选框，我应该显示包含酒吧或咖啡馆类别的结果 提前致谢

Answer 1

您可以遍历选中的复选框，然后使用 b:contains.. 检查元素是否具有选中的值，具体取决于此隐藏/显示 div。

演示代码：

$("input[name='filterStatus']").change(function() {
  //check if the checkbox checked length is > 0
  if ($("input[name='filterStatus']:checked").length > 0) {
    $(".res_show").hide() //hide all divs 
    $("input[name='filterStatus']:checked").each(function() {
      var values = $(this).val() //get valeu of checked checkboxess
      $(".b_category  b:contains(" + values + ")").closest(".res_show").show() //show same
    })
  } else {
    $(".res_show").show()
  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="b_category">
  <input type="checkbox" name="filterStatus" value="Cafe" /><label>Cafe</label>
  <input type="checkbox" name="filterStatus" value="Restaurant" /><label>Restaurant</label>
  <input type="checkbox" name="filterStatus" value="Bar" /><label>Bar</label>
  <input type="checkbox" name="filterStatus" value="Night club" /><label>Night club</label>
</div>
<div class="res_show">
  <div class="btitle">
    <a href="/show_business/{{r.b_id}}/">
      <p style="text-align:left"><b>some1</b></p>
    </a>
  </div>
  <div class="baddress">
    <p>123,abc</p>
  </div>
  <div class="reviewstar">
    <a href="/apply_review/{{r.b_id}}/">
      <p style="text-align:left"><span class="fa fa-star checked"></span> 5 </p>
    </a>
  </div>
  <div class="b_category">
    <p style="text-align: left"> <b>Cafe</b></p>
  </div>
  <div class="diraddress">
    <a href="/show_directions/{{r.id}}/">
      <p style="text-align:left">123 χλμ <b>12:30</b></p>
    </a>
  </div>
  <hr style="border:3px solid #333333">
</div>
<div class="res_show">
  <div class="btitle">
    <a href="/show_business/{{r.b_id}}/">
      <p style="text-align:left"><b>somethins</b></p>
    </a>
  </div>
  <div class="baddress">
    <p>123,abc</p>
  </div>
  <div class="reviewstar">
    <a href="/apply_review/{{r.b_id}}/">
      <p style="text-align:left"><span class="fa fa-star checked"></span> 5 </p>
    </a>
  </div>
  <div class="b_category">
    <p style="text-align: left"> <b>Night club</b></p>
  </div>
  <div class="diraddress">
    <a href="/show_directions/{{r.id}}/">
      <p style="text-align:left">123 χλμ <b>12:30</b></p>
    </a>
  </div>
  <hr style="border:3px solid #333333">
</div>
<div class="res_show">
  <div class="btitle">
    <a href="/show_business/{{r.b_id}}/">
      <p style="text-align:left"><b>some4</b></p>
    </a>
  </div>
  <div class="baddress">
    <p>123,abc</p>
  </div>
  <div class="reviewstar">
    <a href="/apply_review/{{r.b_id}}/">
      <p style="text-align:left"><span class="fa fa-star checked"></span> 5 </p>
    </a>
  </div>
  <div class="b_category">
    <p style="text-align: left"> <b>Bar</b></p>
  </div>
  <div class="diraddress">
    <a href="/show_directions/{{r.id}}/">
      <p style="text-align:left">123 χλμ <b>12:30</b></p>
    </a>
  </div>
  <hr style="border:3px solid #333333">
</div>
<div class="res_show">
  <div class="btitle">
    <a href="/show_business/{{r.b_id}}/">
      <p style="text-align:left"><b>somes</b></p>
    </a>
  </div>
  <div class="baddress">
    <p>123,abc</p>
  </div>
  <div class="reviewstar">
    <a href="/apply_review/{{r.b_id}}/">
      <p style="text-align:left"><span class="fa fa-star checked"></span> 5 </p>
    </a>
  </div>
  <div class="b_category">
    <p style="text-align: left"> <b>Cafe</b></p>
  </div>
  <div class="diraddress">
    <a href="/show_directions/{{r.id}}/">
      <p style="text-align:left">123 χλμ <b>12:30</b></p>
    </a>
  </div>
  <hr style="border:3px solid #333333">
</div>
<div class="res_show">
  <div class="btitle">
    <a href="/show_business/{{r.b_id}}/">
      <p style="text-align:left"><b>somes</b></p>
    </a>
  </div>
  <div class="baddress">
    <p>123,abc</p>
  </div>
  <div class="reviewstar">
    <a href="/apply_review/{{r.b_id}}/">
      <p style="text-align:left"><span class="fa fa-star checked"></span> 5 </p>
    </a>
  </div>
  <div class="b_category">
    <p style="text-align: left"> <b>Restaurant</b></p>
  </div>
  <div class="diraddress">
    <a href="/show_directions/{{r.id}}/">
      <p style="text-align:left">123 χλμ <b>12:30</b></p>
    </a>
  </div>
  <hr style="border:3px solid #333333">
</div>