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

Javascript action based on multiple possible DIV contents

本文关键字：JavaScript 操作 DIV 于多个      更新时间：2023-09-26

我需要帮助为根据城市和州而变化的页面编写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 被隐藏以及哪些被显示。

状态过滤器在以下情况下效果很好：

$(".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();

显然，[城市1或城市2或城市3或...]部分不起作用。 关于如何使其与这样的多个输入一起工作的任何建议？

谢谢！

使用 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%清楚你在寻找什么

相关文章：