在jQuery过滤器什么都不返回时显示消息

问题描述 投票：0回答：3

我在网上找到了按文字内容过滤元素的代码。 如何在没有匹配时显示消息？

$("button").click(function() {
  var value = $(this).data('value').toUpperCase();
  $("div").filter(function(index) {
    $(this).toggle($(this).text().indexOf(value) > -1)
  });
});

<button>example</button>
javascript jquery html filter
3个回答
0
投票

您正在使用filter()根据状态切换每个项目，例如使用each()。但是filter()的一个优点是你可以返回减少的选择并计算它包含的项目。该值可以确定是否应显示“不匹配”消息。

... .filter（）方法从匹配元素的子集构造一个新的jQuery对象。提供的选择器针对每个元素进行测试;匹配选择器的所有元素都将包含在结果中。 - filter()。

对于每个元素，如果函数返回true（或“truthy”值），则该元素将包含在过滤集中;否则，它将被排除在外。 - Using a Filter Function

因此，不要直接从过滤器调用中切换项目，而应考虑返回当前项目是否匹配的布尔值度量。将生成的筛选选择保存在变量中。过滤后，您可以将整个选项切换为：

var $filtered = $items.filter(function() {
  return $(this).text().indexOf(value) > -1;
});

$items.toggle(false);
$filtered.toggle(true);

这会隐藏所有项目，然后仅显示已过滤的项目。 你甚至可以考虑一些褪色动画：

$items.hide(250);
$filtered.stop(true,false).show(250);

然后你可以参考过滤后的选择的length。 如果为零，则显示“未找到”消息：

var hasMatches = $filtered.length;

if (hasMatches) {
  // there were matches.
} else {
  // no matches.
}

你也可以将qazxsw poi传递给过滤器。 jQuery qazxsw poi选择“包含指定文本的所有元素”，这是一个不错的选择。

工作实例：

selector
:contains() selector
var $items = $('.item');
var $none = $('#none');
var fade = 250;

function filterContent() {

  // get word from value of clicked button.
  var word = this.value;

  // hide items; filter; show filtered; count matches
  var hasMatches = $items
    .hide(fade)
    .filter(':contains(' + word + ')')
    .stop(true, false)
    .show(fade)
    .length;

  // if no matches, show message.
  if (hasMatches) {
    $none.hide(fade);
  } else {
    $none.show(fade);
  }

}

$('button').on('click', filterContent);

其他方式：

如果您愿意，只要仍然从函数返回状态布尔值，您就可以在过滤器内部切换。我建议将一个单独的函数传递给过滤器。在这种情况下，#none { display: none; color: darkred; } #buttons { margin: 1em 0 0; }确定项目的状态（匹配或不匹配），根据该状态切换项目，并返回状态。

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

<div class="item">Here is some text.</div>
<div class="item">Here is some other text.</div>
<div class="item">Here is some other different text.</div>
<div class="item">Here is something else.</div>
<div class="item">Here is some additional text.</div>

<div id="none">No matches found.</div>

<nav id="buttons">
  <button type="button" value="">all</button>
  <button type="button" value="text">text</button>
  <button type="button" value="other">other</button>
  <button type="button" value="additional">additional</button>
  <button type="button" value="bazooka">bazooka</button>
</nav>
toggleItem()
var $items = $('.item');
var $none = $('#none');

function toggleItem(word) {
  return function(k, el) {
    var $item = $(el);
    var state = $item.text().indexOf(word) > -1;
    $item.toggle(state);
    return state;
  }
}

function filterContent() {

  // get word from value of clicked button.
  var word = this.value;

  // filter while toggling and count result.
  var hasMatches = $items
    .filter(toggleItem(word))
    .length;

  // if no matches, show message.
  $none.toggle(!hasMatches);

}

$('button').on('click', filterContent);

在我看来，这有点难以阅读，并不像链式“隐藏，过滤，显示，长度”命令那样清晰，但这有点像风格问题。你可以看到有很多方法可以烘烤这个蛋糕！

这个很短很甜：

#none {
  display: none;
  color: darkred;
}

#buttons {
  margin: 1em 0 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="item">Here is some text.</div>
<div class="item">Here is some other text.</div>
<div class="item">Here is some other different text.</div>
<div class="item">Here is something else.</div>
<div class="item">Here is some additional text.</div>

<div id="none">No matches found.</div>

<div id="buttons">
  <button type="button" value="">all</button>
  <button type="button" value="text">text</button>
  <button type="button" value="other">other</button>
  <button type="button" value="additional">additional</button>
  <button type="button" value="bazooka">bazooka</button>
</div>
var $none = $("#none");
var $items = $(".item");

$("button").click(function() {

  var value = $(this).data('value');

  $items.each(function() {
    $(this).toggle($(this).text().indexOf(value) > -1);
  });

  $none.toggle(!$items.filter(':visible').length);

});
1
投票

您可以创建一个变量来计算匹配项。

#none {
  display: none;
  color: darkred;
}

#buttons {
  margin: 1em 0 0;
}

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

<div class="item">Here is some text.</div>
<div class="item">Here is some other text.</div>
<div class="item">Here is some other different text.</div>
<div class="item">Here is something else.</div>
<div class="item">Here is some additional text.</div>

<div id="none">No matches found.</div>

<nav id="buttons">
  <button type="button" data-value="">all</button>
  <button type="button" data-value="text">text</button>
  <button type="button" data-value="other">other</button>
  <button type="button" data-value="additional">additional</button>
  <button type="button" data-value="bazooka">bazooka</button>
</nav>
$("button").click(function(){
var value = $(this).data('value').toUpperCase();
var count = 0;
$("div").filter(function(index) {

  if($(this).text().indexOf(value) > -1) count++;

  $(this).toggle($(this).text().indexOf(value) > -1)

  });
  if(count == 0) alert('Not match');
});
0
投票

$("button").click(function(){ var value = $(this).data('value').toUpperCase(); var count = 0; $("div").filter(function(index) { if($(this).text().indexOf(value) > -1) count++; $(this).toggle($(this).text().indexOf(value) > -1) }); if(count == 0) alert('Not match'); });返回值。检查长度是否为1或更长。

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


<button data-value='test1'>example</button>
filter()
$(".filter").click(function() {
  var value = $(this).text(); //Get the text of the button
  var result = $("div").hide().filter(function(i, o) { //Hide All and filter
    return $(o).text().includes(value); //Return true if the content of div contains text of the button
  }).show(); //Show all result


  if (result.length) { //Check the length of the result
    //Found match/es
    $(".msg").text('');
  } else {
    //No match
    $(".msg").text(`${value} not found`);
  }
});

$(".show-all").click(function() {
  $("div").show();
});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.