如果属性与过滤器不匹配,则隐藏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

您可以迭代所有 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/