如果属性与过滤器不匹配，则隐藏div元素 [英] Hide div element if attribute does not match filter

问题描述

我正在网站上构建一个简单的过滤器功能.

I am building a simple filter feature onto my website.

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

Once the user selects a location from the .start-address and .end-address dropdown, and then presses #go-button, how would I only show the div's which contain a <span class="waypoint"></span> wherein the custom attribute waypoint matches either what is in .start-address and .end-address.

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

Please note that I want to hide the entire waypoint-detail if a match is not found in the waypoints within it, not just a single waypoint.

我已经模拟了一个快速的jsFiddle来显示此内容: http://jsfiddle.net/tLhdndgx/3/.

I have mocked up a quick jsFiddle to show this: 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();
});

推荐答案

您可以遍历所有div，如果它们的waypoint属性与下拉列表中的属性不相等，则隐藏父容器并退出迭代. 此代码检查迭代中我们位于的航路点是否与起点或终点相匹配，如果匹配，则因为有匹配项而退出迭代.如果不匹配，我们将继续进行直到最后一次迭代.如果我们在最后一次迭代中，但仍然没有匹配项，则只需隐藏父容器即可.

You can iterate through all of the divs and if their waypoint attribute is not equal to the one set in the dropdown then hide the parent container and exit the iteration. This code checks to see if the waypoint we are at in the iteration matches the start or end destination, if it does then we exit the iteration because we have a match. If it doesn't match, we keep going until we are on the last iteration. If we are on the last iteration and still don't have a match, we simply hide the parent container.

$('#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/

Here is a fork of your JSFiddle with my answer: http://jsfiddle.net/w1ok0p6o/5/

这篇关于如果属性与过滤器不匹配，则隐藏div元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！