javascript - 下拉菜单和状态选择的 JS 问题

Question

这是 fiddle :https://jsfiddle.net/6aevjxkx/38/

在下拉菜单中，如果您选择内布拉斯加州，您将看到华盛顿州的学校位置，而该位置不应显示。

我认为的问题是脚本正在整个 td 部分搜索任何匹配的状态初始值。对于华盛顿的学校，其地址中包含“NE”，因此当您从下拉列表中选择内布拉斯加州时，该学校就会出现。

话虽如此，如何更新脚本，使其只能在具有“state”类的 div 中搜索匹配的状态？或者如果有其他解决方案，我会竖起耳朵。

谢谢!

脚本代码

$('select#stateCollege').change( function(e) { 
   var letter = $(this).val();
     if (letter === 'ALL') {
         $ ('table.event tr').css('display','inline-block');
     } else {
         $('table.event tr').each( function(rowIdx,tr) {
             $(this).hide().find('td').each( function(idx, td) {
                 if( idx === 0 || idx === 1) {
                     var check = $(this).text();
                     if (check && check.indexOf(letter) > 0) {
                        $(this).parent().css('display','inline-block');
                    } 
                 }
       });             
    });
   }             
});

Answer 1

类似于以下作品:

$('table.event tr').each(function(rowIdx, tr) {
    var row = $(this).hide();
    var state = row.find('.state').text().trim();
    if (state === letter)
        row.css('display', 'inline-block');
});

更新的演示:https://jsfiddle.net/6aevjxkx/42/

即隐藏当前行，然后找到其.state元素的.text()，即.trim() ，然后不用 .indexOf() 而是使用 === 来与名称相当困惑的 letter 变量中的值进行比较。

请注意，鉴于每一行中只有一个 td，因此在 td 元素上使用 .each() 是没有意义的.