如果属性与过滤器不匹配则隐藏 div 元素

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

一旦用户从位置选择.start-address and .end-address下拉菜单，然后按#go-button，我如何只显示包含 a 的 div<span class="waypoint"></span>其中自定义属性waypoint匹配其中的内容.start-address and .end-address.

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

我模拟了一个快速的 jsFiddle 来展示这一点：http://jsfiddle.net/tLhdndgx/3/ 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();
});

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

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

    myDivs.show();
});

Demo http://jsfiddle.net/tLhdndgx/6/

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

这是获得这一切的简单方法。有一种方法可以组合这些选择器，但目前我还没有想到。

Demo 2 http://jsfiddle.net/tLhdndgx/7/

您可能需要重组以将箭头放在隐藏/显示 div 内。