javascript - 如何使用正则表达式的现有结果再次过滤

Question

fiddle :https://jsfiddle.net/d52bt76e/2/

JavaScript:

$('input[type=radio][name=the_time]').change(function () {
  var vResultCount = 0;
  var value = $(this).val();
  var exp = new RegExp('^' + value.toLowerCase(), 'i');
  if (value.toLowerCase() != "any") {
    $(".div1").each(function () {
      if ($(this).css("display") != "none") {
        var isMatch = exp.test($('.leftdv', this).text().toLowerCase().substr($('.leftdv', this).text().length - 2));
        $(this).toggle(isMatch);
      }
    });
  }
  else {
    $(".div1").each(function () {
      $(this).css("display", "");
    });
  }
});

$('input[type=radio][name=the_place]').change(function () {
  var vResultCount = 0;
  var value = $(this).val();
  var exp = new RegExp('^' + value.toLowerCase(), 'i');
  if (value.toLowerCase() != "any") {
    $(".div1").each(function () {
      if ($(this).css("display") != "none") {
        var isMatch = exp.test($('.rightdv', this).text().toLowerCase());
        $(this).toggle(isMatch);
      }
    });
  }
  else {
    $(".div1").each(function () {
      $(this).css("display", "");
    });
  }
});

如果我先按时间过滤，然后按地点过滤，时间会重置。如果我先按地点过滤，然后按时间过滤，地点会重置。

我如何修改单选按钮列表以根据正则表达式更新(暂时隐藏选项而不是应用程序)并允许两个过滤器(稍后可能有更多单选按钮组)同时工作。

例如，如果我首先选择 AM，那么 place 单选按钮应该隐藏 Orlando 单选按钮，然后如果我选择 Miami，它应该只显示 0610AM, Miami选项并隐藏其余部分。

更新:我可以通过检查哪个 div1 没有设置为 display: none 来做我想做的事，但现在我的问题是，如果我从位置选择全部但保留 AM 时间，它会显示所有 4 个选项，而不是具有 AM 的两个选项。我能得到一些帮助吗？我更新了我的 Fiddle 和我的脚本。

Answer 1

我重写了解决方案，我会在最后解释。

function filterResults () {
  var timeValue = $('input[type=radio][name=the_time]:checked').val().toLowerCase();
  var timeRegex = new RegExp(timeValue + '$', 'i');
  var placeValue = $('input[type=radio][name=the_place]:checked').val().toLowerCase();
  var placeRegex = new RegExp('^' + placeValue, 'i');

  $('.div1').each(function () {
    var $div = $(this);
    var divTime = $div.find('.leftdv').html();
    var divPlace = $div.find('.rightdv').html();
    $div.toggle(
      (timeValue === 'all' || timeRegex.test(divTime)) &&
      (placeValue === 'any' || placeRegex.test(divPlace))
    );
  });
}

$('input[type=radio][name=the_time]').change(filterResults);
$('input[type=radio][name=the_place]').change(filterResults);

• 由于存在大量重复代码，我已将该函数移至一个函数中，两个更改处理程序都将委托(delegate)给该函数。

• 此函数会将两个过滤器应用于每个 div。

• time 正则表达式存在错误。可能的值类似于 0630PM但是你的正则表达式看起来像 /^pm/i这将永远匹配。我已将正则表达式更改为 /pm$/i .

• 不要使用 .css('display', 'none') . jQuery 已经有内置方法 hide , show , 和 toggle这是显示的快捷方式:无/ block 。我用过 toggle因为它接受 bool 值。

---

可能的改进注意事项:将“任何/所有”值设置为空字符串。 <input value=""> .然后您可以完全删除“任何/所有”魔术字符串。正则表达式 /^/和 /$/无论如何都会匹配所有结果。无需额外检查。