Question

我需要帮助为根据城市和州改变的页面编写javascript过滤器。州选项作为单个选择下拉列表提供，城市显示为复选框（即可以选择多个城市）。所有DIV（包含一个城市DIV和一个州DIV的父DIV）在各自的DIV中包含城市和州名称，如下所示：

<div class='row'>
  <div class='state'>Alabama</div>
  <div class='city'>Anniston</div>
</div>

这些最初加载到页面上，然后根据初始过滤器隐藏（state ='AL'city ='all'）。当用户通过选择新状态或检查/取消选中城市来更改过滤器时，它会触发一个javascript函数，该函数会重新评估隐藏哪些DIV以及显示哪些DIV。

状态过滤器很好用：

$(".parent").hide();
$(".state:contains('" + state + "')").parent().show();

显示与传递给函数的状态匹配的所有父DIV。我有城市选择的问题。我希望用户能够选择多个城市，因此我需要一些方法来显示城市DIV与任何所选城市匹配的所有父DIV，并且仍然匹配状态。我首先隐藏所有DIV，然后显示匹配状态，然后尝试隐藏不匹配的城市。类似的东西：

$(".parent").hide();
$(".state:contains('" + state + "')").parent().show();
$(".city:not(:contains('" + [city1 OR city2 OR city3 OR ...] + "'))").parent().hide();

显然[city1或city2或city3 OR ...]部分不起作用。关于如何使用这样的多个输入的任何建议？

谢谢！

Answer 1

使用filter() mmethod

我不确定你的复选框是如何设置的，所以会伪代码

首先创建所有城市的数组：

var cities=$('.cityCheckBox:checked').map(function(){
  return this.value
}).get();

现在根据不在数组中的文本过滤城市元素

$(".parent").show();
$('.city').filter(function(){
   var city=$.trim($(this).text());
   /* return only cities not in array*/
   return $.inArray( city,cities) == -1;
}).parent().hide();

这假设您只按城市过滤。对于过滤器，城市和州都需要在过滤功能中进行更强大的测试。不是100％清楚你在寻找什么

基于多个可能的DIV内容的Javascript操作

1 个答案: