javascript - 在不删除先前值的情况下处理选择器的函数

Question

我正在开发一个过滤功能，但在这方面遇到了一些困难。

如何在不撤消前一个过滤器的情况下合并过滤器？

为了更好地理解 jQuery :

$('#departureCitys').change( function() {
    $('.products_dispo').each(function () {
            $(this).show();
            if($(this).find('.cityName').text() != $('#departureCitys').find(":selected").text()){
                 $(this).toggle();
                 }
    });
});

$('#departureDates').change( function() {
    $('.products_dispo').each(function () {
            $(this).show();
            if($(this).find('.departureDate').text() != $('#departureDates').find(":selected").text()){
                 $(this).toggle();
                 }
    });
});

我应该改变我的做事方式吗？我看到的唯一解决方案是进行切换，但它会非常长(因为我有两个以上的 Select)。

我已经完成了 Fiddle，但他不能正常工作，我不明白为什么。无论如何，如果这可以帮助您理解...就是它 --> JsFiddle

如果有人对我有指示，我会很乐意去看看!

Answer 1

我会稍微更改您的代码并使用以下代码。基本上我所做的是为每个选择选项设置一个数据属性，然后将连接的数据属性(将内容与所选选项匹配)设置为表格中表格行的新数据属性。

例如:

• A 0 分，B 1 分，C 2 分，......目的地城市
• 0 点到 01/01/2015，1 点到 02/01/2015，2 点到 03/01/2015，... 目的地日期
• 0 分到 1，1 分到 2，2 分到 3，... 目的地持续时间

当(比方说)选择以下内容时:A, 01/01/2015, 5，值将是 0, 0, 4。然后我们将这些值连接成一个新的数据值，我们比较与表中的值:'0,0,4' 与每个表行的数据属性进行比较。

这变得“棘手”的地方是可能有多个值，因为没有为该选择选择任何内容。假设他们将目的地日期留空，并将目的地城市设置为 A，将目的地持续时间设置为 5。

下面的代码所做的是使用 Regex 将字符串与输出正则表达式进行比较(根据用户选择的值创建，如果没有选择，我们默认为 [0-9]+ 表示以下数字 [0-9](从 0 到 9)中的 +(多个之一)

在未选择目的地日期的情况下，输出正则表达式将为 /0,[0-9]+,4/

现在您需要做的就是使用存储在 SQL 数据库中的主键(我想您正在使用它来填充字段)并将其用作 data-id 值。

---

HTML

<table id='trips'>
    <thead>
        <th>
            <select class='departureCity'>
                <option></option>
                <option data-id='0'>A</option>
                <option data-id='1'>B</option>
                <option data-id='2'>C</option>
                <option data-id='3'>D</option>
                <option data-id='4'>E</option>
            </select>
        </th>
        <th>
            <select class='departureDate'>
                <option></option>
                <option data-id='0'>01/01/2015</option>
                <option data-id='1'>02/01/2015</option>
                <option data-id='2'>03/01/2015</option>
                <option data-id='3'>04/01/2015</option>
                <option data-id='4'>05/01/2015</option>
            </select>
        </th>
        <th>
            <select class='departureDuration'>
                <option></option>
                <option data-id='0'>1</option>
                <option data-id='1'>2</option>
                <option data-id='2'>3</option>
                <option data-id='3'>4</option>
                <option data-id='4'>5</option>
            </select>
        </th>
    </thead>
    <tbody>
        <tr data-all='0,0,0'>
            <td class='city'>A</td>
            <td class='date'>01/01/2015</td>
            <td class='duration'>1</td>
        </tr>
        <tr data-all='1,0,0'>
            <td class='city'>B</td>
            <td class='date'>01/01/2015</td>
            <td class='duration'>1</td>
        </tr>
        <tr data-all='0,1,0'>
            <td class='city'>A</td>
            <td class='date'>02/01/2015</td>
            <td class='duration'>1</td>
        </tr>
        <tr data-all='0,0,4'>
            <td class='city'>A</td>
            <td class='date'>01/01/2015</td>
            <td class='duration'>5</td>
        </tr>
    </tbody>
</table>

jQuery

var $city = $('.departureCity');
var $date = $('.departureDate');
var $dur = $('.departureDuration');

$('#trips select').on('change', function() {
    var array = [];
    array.city = $city.find('option:selected').data('id');
    array.date = $date.find('option:selected').data('id');
    array.dur = $dur.find('option:selected').data('id');
    console.log(array);
    if(typeof array.city === 'undefined') array.city = '[0-9]+';
    if(typeof array.date === 'undefined') array.date = '[0-9]+';
    if(typeof array.dur === 'undefined') array.dur = '[0-9]+';
    var regex = array.city+','+array.date+','+array.dur;
    $('#trips tbody tr').show();
    $('#trips tbody tr').each(function() {
        var $this = $(this);
        var data = $this.data('all');
        if(data.match(regex)) $this.show();
        else $this.hide();
    });

});

jsfiddle:http://jsfiddle.net/ctwheels/nfLog6x8/