如何使用regexp的现有结果再次进行过滤

时间：2017-05-24 19:36:30

标签： javascript jquery html regex

小提琴：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，则地点单选按钮应隐藏Orlando单选按钮，然后如果我选择迈阿密，它应该只显示0610AM, Miami选项并隐藏其余部分。

更新：我可以通过检查查看哪个div1未设置为display: none来完成，但现在我的问题是，如果我选择全部来自放置但保持AM时间，它显示所有4个选项而不是有AM的两个选项。请问我能得到一些帮助。我更新了我的小提琴和我的剧本。

3 个答案:

答案 0 :(得分：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);

  • 由于存在大量的代码重复，我已将该函数移动到一个单独的函数中，两个更改处理程序都将委托给它。

  • 此功能会将两个过滤器应用于每个div。

  • time 正则表达式存在错误。可能的值看起来像0630PM，但您的正则表达式看起来像/^pm/i，永远不会匹配。我已将正则表达式更改为/pm$/i。

  • 请勿使用.css('display', 'none')。 jQuery已经内置了方法hide，show和toggle，这是display：none / block的快捷方式。我使用toggle因为它接受一个布尔值。

注意可能的改进：将“any / all”值设置为空字符串。 <input value="">。然后你可以完全删除“any / all”魔术字符串。无论如何，正则表达式/^/和/$/都会匹配所有结果。无需额外支票。

答案 1 :(得分：1)

好的，我重构了一下你的样本。你可以改进所有第一个变量的代码，只保留你真正需要的变量，也许你也可以改进jQuerty代码以及其他很多东西：D

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

function filterResults() {
	var timeValue = $('input[type=radio][name=the_time]:checked').val();
	var placeValue = $('input[type=radio][name=the_place]:checked').val();
  var timeExp = new RegExp(timeValue.toLowerCase() + '$', 'i');
  var placeExp = new RegExp('^' + placeValue.toLowerCase(), 'i');
  var matchTime = false;
  var matchPlace = false;
  $(".div1").each(function () {
    matchTime = timeValue.toLowerCase() == "any" ? 
      true : 
    	timeExp.test($('.leftdv', this).text().toLowerCase());
    matchPlace = placeValue.toLowerCase() == "all" ? 
      true : 
    	placeExp.test($('.rightdv', this).text().toLowerCase());
    $(this).toggle(matchTime && matchPlace);
  });
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="the_time" value="any" checked="checked">Any <input type="radio" name="the_time" value="am">AM <input type="radio" name="the_time" value="pm">PM
<br />
<br />
<input type="radio" name="the_place" value="all" checked="checked">All <input type="radio" name="the_place" value="Orange County">Orange County <input type="radio" name="the_place" value="Miami">Miami <input type="radio" name="the_place" value="Orlando">Orlando
<br />
<br />
<div class="checkdv">
	<div class="div1">
		<div class="leftdv">0500AM</div>
		<div class="rightdv">Orange county</div>
	</div>
	<div class="div1">
		<div class="leftdv">0610AM</div>
		<div class="rightdv">Miami</div>
	</div>
	<div class="div1">
		<div class="leftdv">0700PM</div>
		<div class="rightdv">Miami</div>
	</div>
	<div class="div1">
		<div class="leftdv">0900PM</div>
		<div class="rightdv">Orlando</div>
	</div>
</div>
＆＃13;
＆＃13;
＆＃13;

https://jsfiddle.net/d52bt76e/10/

答案 2 :(得分：1)

我已更新您的代码，以便独立跟踪时间和位置变量。你可以看到这个解决方案的小提琴https://jsfiddle.net/d52bt76e/5/ 

// Track time and place seperately

var time = "any";
var place = "any";

$('input[type=radio][name=the_time]').change(function() {
  var vResultCount = 0;
  var value = $(this).val();
  var exp = new RegExp('^' + value.toLowerCase(), 'i');
  // If the value changes we need to check the filter on place as well
  var placeExp = new RegExp('^' + place.toLowerCase(), 'i');
  // no dupe variables
  var isMatch;
  time = value.toLowerCase();

  if (value.toLowerCase() != "any") {
    $(".div1").each(function() {
      isMatch = exp.test($('.leftdv', this).text().toLowerCase().substr($('.leftdv', this).text().length - 2));
      if(place != "any") {
        isMatch = isMatch && placeExp.test($('.rightdv', this).text().toLowerCase());
      }
      $(this).toggle(isMatch);
    });
  } else {
    $(".div1").each(function() {
      // we still need to filter on place when not filtering on time
      isMatch = place === 'any' ? true : placeExp.test($('.rightdv', this).text().toLowerCase());

      $(this).toggle(isMatch);
    });
  }
});

$('input[type=radio][name=the_place]').change(function() {
  var vResultCount = 0;
  var value = $(this).val();
  place = value.toLowerCase();
  var exp = new RegExp('^' + value.toLowerCase(), 'i');
  var timeExp = new RegExp('^' + time.toLowerCase(), 'i');
  // don't redeclare vars
  var isMatch;
  if (value.toLowerCase() != "any") {
    $(".div1").each(function() {
      isMatch = exp.test($('.rightdv', this).text().toLowerCase());
      if(time != "any") {
        isMatch = isMatch && timeExp.test($('.leftdv', this).text().toLowerCase().substr($('.leftdv', this).text().length - 2));
      }
      $(this).toggle(isMatch);
    });
  } else {
    $(".div1").each(function() {
    // We still need to filter on time even when not filtering on place
    isMatch = time === "any" ? true : timeExp.test($('.leftdv', this).text().toLowerCase().substr($('.leftdv', this).text().length - 2));
      $(this).toggle(isMatch);
    });
  }
});

这里的关键是每当一个选项改变时，你需要跟踪另一个选项的显示值。最简单的方法是使用两个独立于变更函数的独立变量。这里它们是全局变量，但是你可以通过闭包或其他成语完成相同的操作。

关键变化是这些

  if(place != "any") {
    isMatch = isMatch && placeExp.test($('.rightdv', this).text().toLowerCase());
  }
if(time != "any") {
    isMatch = isMatch && timeExp.test($('.leftdv', this).text().toLowerCase().substr($('.leftdv', this).text().length - 2));
}

这些

else {
    $(".div1").each(function() {
      // we still need to filter on place when not filtering on time
      isMatch = place === 'any' ? true : placeExp.test($('.rightdv', this).text().toLowerCase());

      $(this).toggle(isMatch);
    }

else {
    $(".div1").each(function() {
    // We still need to filter on time even when not filtering on place
    isMatch = time === "any" ? true : timeExp.test($('.leftdv', this).text().toLowerCase().substr($('.leftdv', this).text().length - 2));
      $(this).toggle(isMatch);
    }

在每种情况下，我们正在做的是相同的，检查另一个选项的值并确保过滤这两个项目。

相关问题
最新问题