Question

我正在根据其数据属性中的内容过滤掉某些元素，如果没有结果，我想显示一些HTML。我对JS / jQuery不太了解，因此我无法完全思考如何实现。如果有人能指出我正确的方向，我将不胜感激。这是jQuery：

$("#filter").keyup(function() {
    var selectSize = $(this).val();
    filter(selectSize);
});
function filter(e) {
    var numVisible = 0;
    var addCard = $('.ourTeamCards');
    if(e) {
        var regex = new RegExp('\\b\\w*' + e + '\\w*\\b', 'i');
        $('.oneStaff').fadeOut(50).filter(function () {
            var regExists = regex.test($(this).data('regions'));
            if(regExists) {
                numVisible +=1; 
            }
            return regExists;
        }).fadeIn(50);
    } else {
        $('.oneStaff').fadeIn(50);
    }
    if(numVisible == 0) {
        addCard.append("<div class='noResults'>No Results</div>");
    }
    else {
        $('.noResults').css('display', 'none');
    }
}

这是一支带有工作示例的笔：https://codepen.io/west4me/pen/dQZxMZ 如果您搜索怀俄明州，您会看到它过滤器。如果您搜索华盛顿，您将不会获得任何结果。如果没有结果，我想附加一些HTML / Text表示没有结果。

Answer 1

我设法弄清楚了。这是对我有用的代码：

$("#filter").keyup(function() {
	var selectSize = $(this).val();
	filter(selectSize);
});
function filter(e) {
	var numVisible = 0;
	var addCard = $('.ourTeamCards');
	if(e) {
		var regex = new RegExp('\\b\\w*' + e + '\\w*\\b', 'i');
		$('.oneStaff').fadeOut(50).filter(function () {
			var regExists = regex.test($(this).data('regions'));
			if(regExists) {
				numVisible +=1; 
			}
			return regExists;
		}).fadeIn(50);
		if (numVisible == 0) {
			$('.noResults').css('display', 'block');	
		}
	 	else {
			$('.noResults').css('display', 'none');
		}
	}	
	else {
		$('.oneStaff').fadeIn(50);
	}	
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-12">
    <div class="filterSearch">
        <h1 class="">Filter</h1>        
          <input id="filter" type="text" class="form-control quicksearch" placeholder="Search">
        <span class="d-block mt-2 searchIns">Search by country or state</span>
      </div>
  </div>
</div>
<div class="row ourTeamCards">
    <div class="oneStaff col-4 border border-primary" data-target="#exampleModal" data-regions="Alaska, Arizona, Arkansas, California, Colorado, Hawaii, Idaho, Kansas, Louisiana, Missouri, Montana, Nebraska, Nevada, New Mexico, North Dakota, Oklahoma, Oregon, South Dakota, Texas, Utah, Wyoming">
    Name
    </div>
<div class="oneStaff col-4 border border-primary" data-target="#exampleModal" data-regions="Alaska, Arizona, Arkansas, California, Colorado, Hawaii, Idaho, Kansas, Louisiana, Missouri, Montana, Nebraska, Nevada, New Mexico, North Dakota, Oklahoma, Oregon, South Dakota, Texas, Utah">
    Name
    </div>
<div class="oneStaff col-4 border border-primary" data-target="#exampleModal" data-regions="Alaska, Arizona, Arkansas, California, Colorado, Hawaii, Idaho, Kansas, Louisiana, Missouri, Montana, Nebraska, Nevada, New Mexico, North Dakota, Oklahoma, Oregon, South Dakota, Texas, Utah">
    Name
    </div>    
  </div>
<div class="noResults" style="display:none;">No Results</div>

过滤元素（如果没有结果显示此内容）

1 个答案: