Question

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

HTML：

_x's

JS：

NaN

我的问题是，由于某种原因，程序不断跳过if语句。我有控制台记录了信息，数据是正确的。我认为我的if语句有问题。

因此，例如，如果选择“Jolly Rancher”，则列表应该是过滤器，因此只列出具有数据属性“Candy”的项目。其他人则被隐藏起来。

我需要使用data属性来过滤应用程序的其他部分，所以我无法改变它。它可能是一些简单的东西，但会感激任何帮助。 jsfiddle在下面演示

对于奇怪的var名称，不得不保留一些东西。

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/

Answer 2

是的，您的if声明存在问题，请改用<{1}}

< 0

Answer 3

针对每个元素循环遍历整个数据对象的不同方法。在将项添加到选项列表时，这种方法的扩展性更强，因为无论存在多少数据属性，它都可以工作，并且不需要重构条件代码

$('#mankList').change(function () {
    // get the whole data object from selected option
    var data = $(this).find(':selected').data();
   // hide all items, start filtering
    $items.hide().filter(function () {
        var isMatch = false,
            txt = $(this).text();
        // loop over data object to check values against text
        for (var key in data) {
            if (data[key] != 'undefined') {
                if (txt.indexOf(data[key]) > -1) {
                    isMatch = true;
                }
            }
        }
        return isMatch;
     // finally ... show matching elements
    }).show();

});

使用一个数据属性中的值数组

会更简单

DEMO

Answer 4

undefined是在属性中将其设置为undefined时的字符串。

"undefined"===undefined  //false

如果您要删除未定义的那些，它将获取已定义的那些。

其他问题是你没有展示过lis所以如果再次更改它们，它们将保持隐藏状态。

Jquery - 使用所选选项过滤li

4 个答案: