Скрыть элемент div, если атрибут не соответствует фильтру

Question

Я создаю простую функцию фильтра на своем веб-сайте.

После того как пользователь выбирает место из .start-address и .end-address выпадающего списка, а затем нажимает #go-button, как бы я только показать DIV, который содержит <span class="waypoint"></span>, в котором пользовательский атрибуте waypoint матчей либо, что находится в .start-address и .end-address.

Обратите внимание, что я хочу скрыть все waypoint-detail, если совпадение не найдено в путевых точках внутри него, а не только одной путевой точки.

Я высмеял быстрый jsFiddle, чтобы показать это: http://jsfiddle.net/tLhdndgx/3/.

HTML

<div class="row"> 
    <div class="col-md-4">Start: 
     <br> 
     <select class="form-control start-address"> 
      <option value="Lab">Lab</option> 
      <option value="Hall">Hall</option> 
      <option value="Apartments">Apartments</option> 
      <option value="Church">Church</option> 
      <option value="Park">Park</option> 
      <option value="College">College</option> 
     </select> 
    </div> 
    <br> 
    <div class="col-md-4">Destination: 
     <br> 
     <select class="form-control end-address"> 
      <option value="Lab">Lab</option> 
      <option value="Hall">Hall</option> 
      <option value="Apartments">Apartments</option> 
      <option value="Church">Church</option> 
      <option value="Park">Park</option> 
      <option value="College">College</option> 
     </select> 
    </div> 
    <br> 
    <div class="col-md-4"> 
     <button type="button" class="btn btn-success" id="go-button">Go</button> 
    </div> 
</div> 
<br> 
<div class="panel panel-default waypoint-detail" style="display: block;"> 
    <div class="panel-body"> 
     <strong>Waypoint Set 1</strong> 
     <br> 
     <br> 
     <center> 
      <span style="color:#449D44">Start</span> 
      <br>↓<br> 
     </center> 
     <center> 
      <span class="waypoint" waypoint="Hall">Hall</span> 
      <br>↓<br> 
     </center> 
     <center> 
      <span class="waypoint" waypoint="Apartments">Apartments</span> 
      <br>↓<br> 
     </center> 
     <center> 
      <span class="waypoint" waypoint="Church">Church</span> 
      <br>↓<br> 
     </center> 
     <center><span style="color:#c12e2a">Stop</span></center> 
    </div> 
</div> 
<div class="panel panel-default rideshare-detail" style="display: block;"> 
    <div class="panel-body"> 
     <strong>Waypoint Set 2</strong> 
     <br> 
     <br> 
     <center> 
      <span style="color:#449D44">Start</span> 
      <br>↓<br> 
     </center> 
     <center> 
      <span class="waypoint" waypoint="Hall">Park</span> 
       <br>↓<br> 
     </center> 
     <center> 
      <span class="waypoint" waypoint="College">College</span> 
      <br>↓<br> 
     </center> 
     <center><span style="color:#c12e2a">Stop</span></center> 
    </div> 
</div> 

JavaScript

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

Answer 1

Вы можете перебирать все дивы, и если их атрибут 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(); 
}); 

Demo

Обратите внимание, что я спрятала дивы первоначально с помощью CSS. Это предотвращает странность при загрузке страницы.

Вот простой способ получить все. Есть способ объединить эти селекторы, но сейчас он ускользает от меня.

Demo 2

Вы, вероятно, хотите перестроиться, чтобы положить ваши стрелы внутри скрыть/показать дивы.

Answer 3

Я не очень понимаю ваш пользовательский интерфейс, но вы можете использовать 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(); 
    } 

}); 

Обратите внимание, что <center> тег является устаревшим, используйте CSS вместо

DEMO

Answer 4

Это должно сделать Это. 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 5

Вот один из способов сделать это. Вы можете получить все 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/