如果属性与filter不匹配，则隐藏div元素

我正在我的网站上构建一个简单的filterfunction。

一旦用户从.start-address和.end-address下拉列表中选择一个位置，然后按#go-button ，我将如何仅显示包含的div自定义属性waypoint匹配.start-address和.end-address 。

请注意，如果在其中的航点中找不到匹配，我想隐藏整个waypoint-detail ，而不仅仅是单个航路点。

我已经嘲笑了一个快速的jsFiddle来展示这个： http ： //jsfiddle.net/tLhdndgx/3/ 。

HTML

 
 
Start: 
  Lab Hall Apartments Church Park College  
 
 
Destination: 
  Lab Hall Apartments Church Park College  
 
 
 Go 
 
 
 
 
 Waypoint Set 1 
 
  Start 
↓
   Hall 
↓
   Apartments 
↓
   Church 
↓
  Stop 
 
 
 
 Waypoint Set 2 
 
  Start 
↓
   Park 
↓
   College 
↓
  Stop 
  

JavaScript的

 $('body').on('click', '#go-button', function (event) { // Collect values var startAddress = $('.start-address').val(); var destinationAddress = $('.destination-address').val(); }); 

Answer 1

您可以遍历所有div，如果它们的waypoint属性不等于下拉列表中设置的那个，则隐藏父容器并退出迭代。 此代码检查我们在迭代中的路点是否与开始或结束目标匹配，如果确实如此，则我们退出迭代，因为我们有匹配。 如果它不匹配，我们继续前进，直到我们进行最后一次迭代。 如果我们在最后一次迭代中仍然没有匹配，我们只需隐藏父容器。

 $('#go-button').click(function() { var startAddress = $('.start-address').val(); var destinationAddress = $('.end-address').val(); function checkWaypoints(container){ $(container).show(); $(container+' .waypoint').each(function(a,b){ var waypoint = $(b).attr('waypoint'); console.log(waypoint); if((waypoint == startAddress) || (waypoint == destinationAddress)){ return false; } else if($((waypoint != startAddress) && (waypoint != destinationAddress)) && a == $(container+' .waypoint').length-1) { $(this).closest(container).hide(); } }); } checkWaypoints('.waypoint-detail'); checkWaypoints('.rideshare-detail'); }); 

这是我的答案的JSFiddle的一个分支： http ： //jsfiddle.net/w1ok0p6o/5/

Answer 2

这是一个开始。 只需将正确的元素分配给变量并显示它们即可。

 $('body').on('click', '#go-button', function (event) { ... var myDivs = $('.waypoint[waypoint=' + startAddress + ']'); myDivs.show(); }); 

演示

请注意，我最初用CSS隐藏了div。 这可以防止页面加载时出现奇怪现象。

这是一种简单的方法来实现这一切。 有一种方法可以将这些选择器组合在一起，但此刻它让我感到惊讶。

演示2

你可能想要重组以将你的箭头放在hide / show div中。

Answer 3

这应该做到这一点。 http://jsfiddle.net/tLhdndgx/10/

 var waypoints = $('.waypoint'), details = $('.waypoint-detail'); $('body').on('click', '#go-button', function (event) { // Collect values var startAddress = $('.start-address').val(); var destinationAddress = $('.end-address').val(); details.hide(); waypoints.filter(function(){ var self = $(this), waypoint = self.attr('waypoint'); return (waypoint == startAddress || waypoint == destinationAddress); }).parent(details).show(); }); 

Answer 4

我真的不了解你的UI，但你可以使用filter()

 var $waypoints = $('.waypoint').parent() $('body').on('click', '#go-button', function (event) { // Collect values var startAddress = $('.start-address').val(); var destinationAddress = $('.end-address').val(); // check for at least one value if (startAddress || destinationAddress) { // hide all then filter the ones that match to show $waypoints.hide().filter(function () { var waypointVal = $(this).find('.waypoint').attr('waypoint'); return waypointVal == startAddress || waypointVal == destinationAddress }).show() } else { //otherwise show all $waypoints.show(); } }); 

请注意，不推荐使用

标记，而是使用css

DEMO

Answer 5

这是一种方法。 您可以获取所有不包含“waypoint”类和“waypoint”属性等于所选选项之一的span的div ，然后应用jquery hide（）。

 $('body').on('click', '#go-button', function (event) { // Collect values var startAddress = $('.start-address').val(); var destinationAddress = $('.end-address').val(); $('div').filter(function (index) { return $(this) .find("span.waypoint[waypoint=" + startAddress + "], span.waypoint[waypoint=" + destinationAddress + "]") .length == 0; }).hide(); }); 

jsfiddle： http ： //jsfiddle.net/4rvz09mu/