Question

我遇到以下问题：

迭代我的所有div以检查他们的waypoint属性是否等于as startAddress 中设置的那个 destinationAddress ，如果div中的所有航点项都没有匹配，我想隐藏父容器（ rideshare-item ）并继续。但如果有匹配，我不想隐藏它。

使用$(this).closest('.rideshare-item').hide();似乎不起作用。我的代码有问题吗？

Jsfiddle here

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><br>
<div class="row rideshare-item">
    <div class="col-md-7">
        <div class="panel panel-default rideshare-detail">
            <div class="panel-body"> <strong>Waypoints</strong>
                <br>
                <br> <span style="color:#449D44">Start</span>
                <br> <span class="waypoint" data-waypoint="Hall">Hall</span>
                <br> <span class="waypoint" data-waypoint="Apartments">Apartments</span>
                <br> <span class="waypoint" data-waypoint="Train Station">Train Station</span>
                <br> <span style="color:#c12e2a">Stop</span>
            </div>
        </div>
    </div>
</div>
<div class="row rideshare-item">
    <div class="col-md-7">
        <div class="panel panel-default rideshare-detail">
            <div class="panel-body"> <strong>Waypoints</strong>
                <br>
                <br> <span style="color:#449D44">Start</span>
                <br> <span class="waypoint" data-waypoint="Lab">Lab</span>
                <br> <span class="waypoint" data-waypoint="Park">Park</span>
                <br> <span style="color:#c12e2a">Stop</span>
            </div>
        </div>
    </div>
</div>

JS

$('body').on('click', '#go-button', function (event) {
    // Collect values
    var startAddress = $('.start-address').val();
    var destinationAddress = $('.destination-address').val();
    // Only show matching pickup address and waypoint
    $('.rideshare-item').show();
    $('.rideshare-item .rideshare-detail .waypoint').each(function (a, b) {
        var waypoint = $(b).data('waypoint');
        if ((waypoint == startAddress) || (waypoint == destinationAddress)) {
            // do not hide div element
        } else if ($((waypoint != startAddress) && (waypoint != destinationAddress)) && a == $('.rideshare-detail .waypoint').length - 1) {
            // hide div element 
            $(this).closest('.rideshare-item').hide();
        }
    });
}

Answer 1

您的JSFiddle已损坏（缺少结束);）
您还创建了一个虚拟jQuery对象并测试为true（始终匹配）$((waypoint != startAddress) && (waypoint != destinationAddress))

我也改变了你的逻辑（首先隐藏并在匹配时显示）以简化它：

$('body').on('click', '#go-button', function (event) {
    // Collect values
    var startAddress = $('.start-address').val();
    var destinationAddress = $('.destination-address').val();
    // Only show matching pickup address and waypoint
    $('.rideshare-item').hide();
    $('.rideshare-item .rideshare-detail .waypoint').each(function (a, b) {
        var waypoint = $(b).data('waypoint');
        if (waypoint == startAddress || waypoint == destinationAddress) {
            // show div element 
            $(this).closest('.rideshare-item').show();
        }
    });
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/e3kg160g/6/

$（this）.closest在div迭代后不工作

1 个答案: