javascript - Jquery - 使用所选选项过滤 li

Question

我正在使用 jquery 根据选择框中的下拉列表来过滤列表。我正在使用预先分配的数据属性来过滤每个列表。如果列表项的数据属性等于所选选项的值，则不执行任何操作，否则进行过滤。

HTML:

<select id = 'mankList'>
<option value='ALL' selected>Filter By Item</option>
<option data-book1 =undefined data-book2=undefined data-book3='Vegetables' data-book4='Food' data-book5=undefined> Onions </option>
<option data-book1 ='Fruit' data-book2=undefined data-book3=undefined data-book4='Food' data-book5=undefined> Grapes </option>
<option data-book1 ='Fruit' data-book2=undefined data-book3=undefined data-book4='Food' data-book5=undefined> Oranges </option>
<option data-book1 =undefined data-book2='Candy' data-book3=undefined data-book4='Food' data-book5=undefined>Jolly Rancher </option>
<option data-book1 =undefined data-book2=undefined data-book3=undefined data-book4=undefined data-book5='NOA'> Chair </option></select>

<ul><li>Fruit</li>
    <li>Candy</li>
    <li>Food</li>
    <li>Vegetables</li>
</ul>

JS:

$(document).on('change', '#mankList', function() {


    var val1 = $('#mankList option:selected').val(),
        val2 = $('#mankList option:selected').data('book1'),
        val3 = $('#mankList option:selected').data('book2'),
        val4 = $('#mankList option:selected').data('book3'),
        val5 = $('#mankList option:selected').data('book4'),
        val6 = $('#mankList option:selected').data('book5'),
        val7 = $('#mankList option:selected').data('book6'),
        val8 = $('#mankList option:selected').data('book7'),
        val9 = $('#mankList option:selected').data('book8'),
        val10 = $('#mankList option:selected').data('book9'),
        val11 = $('#mankList option:selected').data('book10'),
        val12 = $('#mankList option:selected').data('book11'),
        val13 = $('#mankList option:selected').data('book12');



    if ( val1 === 'ALL')
    {

        $('li').each( function() {
            $(this).removeClass('hidden');
        });

    }
    else 
    {
        $('li').each(function() {
            if ($(this).text().indexOf(val2 || val3 || val4 || val5 ||val6 || val7 || val8 || val9 || val10 || val11 || val12 || val13) > 0) {
                console.log('not a match');
            }else{
                $(this).addClass('hidden'); 
            }
        });
    }

});

我的问题是，由于某种原因，程序在不应该跳过的情况下不断跳过 if 语句。我已经控制台记录了信息并且数据是正确的。我认为我的 if 语句有问题。

例如，如果选择“Jolly Rancher”，则应该对列表进行过滤，以便仅显示具有数据属性“Candy”的列表项。其他的则被隐藏。

我需要使用数据属性来过滤应用程序的其他部分，因此我无法更改它。这可能很简单，但希望得到任何帮助。下面是jsfiddle的演示

抱歉，变量名称很奇怪，必须保留一些内容。

jsfiddle

Answer 1

我发现了 2 个问题。第一个是“未定义”。如果任何'valx'变量未定义，它将导致indexOf调用每次都返回-1。

val1 = val1 == 'undefined' ? '' : val1;
val2 = val2 == 'undefined' ? '' : val2;
val3 = val3 == 'undefined' ? '' : val3;
val4 = val4 == 'undefined' ? '' : val4;
val5 = val5 == 'undefined' ? '' : val5;
val6 = val6 == 'undefined' ? '' : val6;

另一个问题是你的indexOf 检查。它应该检查索引是否 >-1，因为 0 可以是合法索引。

if ($(this).text().indexOf(val2 || val3 || val4 || val5 || val6) > -1)

编辑:

正如您在评论中指出的那样，上述方法有效，但如果一个元素具有多个数据值，那么它只会显示 1 li。为了解决这个问题，我会稍微改变一下存储和搜索 indexOf 的方式。

将 valx 值存储在数组中，而不是单独的变量

var values = new Array();
values.push(val1 == 'undefined' ? '' : val1);
values.push(val2 == 'undefined' ? '' : val2);
values.push(val3 == 'undefined' ? '' : val3);
values.push(val4 == 'undefined' ? '' : val4);
values.push(val5 == 'undefined' ? '' : val5);
values.push(val6 == 'undefined' ? '' : val6);

然后，不要在indexOf调用中使用||，只需在新数组中搜索$(this).text()值:

if(values.indexOf($(this).text()) > -1) { console.log('executed');}                
else{ $(this).hide(); }

我还在调用的开头添加了 $('li').show(); ，以便在每次更改下拉列表时重置列表。

新的 JSFiddle: http://jsfiddle.net/bh55ux8j/1/