Question

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

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

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

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

    myDivs.show();
});

<强> Demo

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

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

<强> Demo 2

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

Answer 2

这应该这样做。 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 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

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

这是一种方法。您可以获取所有不包含“waypoint”类的span的div，并且waypoint属性等于所选选项之一，然后应用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/

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

5 个答案: