Question

我正在处理一个小项目，如果他们的td.icaoIata不包含输入栏中输入的字符串，我需要隐藏表行的功能。最重要的是，如果它们的data-属性在Jquery滑块的范围内，它们将被隐藏/显示。那部分我开始工作了，不应该有用。

基本上，如果找不到字符串，请隐藏该行。然后，一旦更新输入框，再次检查，并隐藏/显示是否仍未找到/找到。

我的麻烦主要是结合了不同的功能，比如find（），：contains等我无法一起工作。

我希望我足够清楚。

有人可以指导我找到解决方案吗？

这是我的代码。非常感谢！

 <input type="text" name="search" class="form-control searchinput" ><br>
<div id="slider"></div>
<div id="slider-value-lower"></div>
<div id="slider-value-upper"></div>
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>Flight #</th>
                <th>Departure</th>
                <th>Arrival</th>
                <th>Duration</th>
                <th>Aircraft</th>
                <th>Distance</th>
                <th>Options</th>
            </tr>
        </thead>
        <tbody class="schedules">
            <tr class="schedulerow" data-duration="1.4"> 
                <td><a href="">DLH1058</a></td>
                <td class="icaoIata">Frankfurt Main <small>(EDDF)</small></td>
                <td class="icaoIata">Cote D'Azur <small>(LFMN)</small></td>
                <td> 1.4 h</td>
                <td class="icaoIata">
                    A320 
                </td>
                <td>386 nm</td>
                <td>
                    <a href="" class="btn btn-success">Book</a>
                </td>
            </tr>
            ............

        </tbody>
    </table>

我的JS

var slider = document.getElementById('slider');

noUiSlider.create(slider, {

    connect: true,
    start: [0,3],
    step: 0.5,
    tooltips: true,
    range: {
        'min': 0,
        'max': 20
    }
});
//initialize the values
$(".schedules").children().hide().filter(function() {
    var duration = $(this).data('duration');
    return duration >= 0 && duration <= 3;
}).addClass('is-shown').show();

$(".searchinput").keyup(function() {
    var content = $(".searchinput").val();
    //My mess was here....
});

slider.noUiSlider.on('change', function( values, handle ) {

    /*sliderValues[handle].innerHTML = values[handle];*/
    filterRows(values[0], values[1]);
});

function filterRows(min, max) {
    $(".schedules").children().removeClass('is-shown').hide().filter(function() {
        var duration = $(this).data('duration');
        return duration >= min && duration <= max;
    }).addClass('is-shown').show();
}

所以，

Answer 1

使用.filter()。

schematool -dbType derby -initSchema

Answer 2

由于您已经应用的过滤器可以从多个来源（滑块和输入框）设置，我会保留一个单独的对象，其中保留过滤器设置（对于值的DRY设置也很有用）

e.g。

var filter ={
  min: 0,
  max: 3,
  text : ''
};

其中min和max是持续时间，text是搜索文本。

filterRows方法可以使用过滤器对象，不需要参数：

function filterRows() {
    $(".schedules").children().removeClass('is-shown').hide().filter(function() {
        var duration = $(this).data('duration');
        return duration >= filter.min && duration <= filter.max
            && (!filter.text || $(this).children('td.icaoIata').filter(function(){return $(this).text().toLowerCase().indexOf(filter.text) !== -1;}).length);
    }).addClass('is-shown').show();
}

滑块和输入应设置正确的过滤器值并调用filterRows方法。

示例fiddle

检查td是否包含文本？

2 个答案: