javascript - jQuery 查找的 IE7 问题？

Question

在我开始使用 IE9.js 文件之前，以下代码在 IE7 中运行良好。 IE9.js 文件向我添加的现有类添加了一个附加类“ie7_class82”。下面的代码在 IE7 中停止工作。当存在多个类时，是否存在无法使用 jQuery 找到匹配类的已知问题？

------------HTML代码框架------------

<table cellspacing="0" cellpadding="0" bgcolor="#FFF" width="100%">
    <thead>
        ---table rows here---- 
    </thead>
    <tbody>
    <tr>
    <td>
<table cellspacing="0" border="0" width="100%" style="float:left">
    <thead>
      <tr style="text-align:left;">
        <td style="font-size:14px;font-weight:bold;text-align:left;padding:10px 5px">
                <span><label class="quarterly">Quarterly</label></span>
                <span style="padding:5px">|</span>
                <span><label class="monthly">Monthly</label></span>
                 <span style="padding:5px">|</span>
                <span><label class="daily">Daily</label></span>
        </td>
      </tr>
    </thead>
    <tbody>

     ---table rows here----     
      </tbody>
      </table>
      </td>
     </tr> 
     <tr>
    <td>
    <table cellspacing="0" border="0" width="100%" style="float:left" class="quarterly">
    ---table rows here---
    </table>
    </td>
    </tr>
    <tr>
    <td>
    <table cellspacing="0" border="0" width="100%" style="float:left" class="monthly">
    ---table rows here---
    </table>
    </td>
    </tr>
    <td>
    <table cellspacing="0" border="0" width="100%" style="float:left" class="daily">
    ---table rows here---
    </table>
    </td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </table>

--------jQuery代码----------------

 $('table thead span label').click(function() {               
        $(this).parents('table').parents('table').find('table').hide();
        $(this).closest('table').find('tbody tr').hide();           
        $(this).closest('table').show();
        $(this).closest('table').find('tbody tr.' + this.className).show();
        $(this).parents('table').parents('table').find('table.' + this.className).show();
    });​

注意:很遗憾，在 IE7 中没有错误(在 FF 和 Chrome 中工作正常)。它应该隐藏所有表并仅显示与标签标签中存在的类名匹配的表。 IE7 隐藏所有表格，但无法显示符合该类的表格。

更新的代码(在 IE7 中工作，感谢 SO):

$('table thead span label').click(function() {  
                        var classSelector = $.trim($(this).attr('class')).split(/\s+/g).join(',');  
                        $('label:not('+classSelector+')').css('color','#00425f');       
                        $(this).css('color','#d6c9b9');                     
                        $(this).parents('table').parents('table').find('table').hide();                     
                        $(this).closest('table').find('tbody tr').hide();                       
                        $(this).closest('table').show();
                        $(this).closest('table').find('tbody tr.' + classSelector).show();
                        $(this).parents('table').parents('table').find('table.'+ classSelector).show();
            });

Answer 1

this.className 返回实际的 class 属性，在 ie7 的情况下，由于 ie9.js 文件，它包含多个类。
这意味着像您使用的选择器:

'table.' + this.className

将被翻译成:

'table.yourClassName ie7_class82'

这不是有效的 jquery(或 css)选择器。

我建议您将 this.className 替换为:

var classSelector = $.trim($(this).attr('class')).split(/\s+/g).join('.');

这意味着:

'table.' + classSelector 

将被翻译成:

'table.yourClassName.ie7_class82.some-other-classes-if-any'