Question

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

-------------- HTML code skeleton -------------

<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中工作正常）。它应该隐藏所有表并仅显示与label标签中存在的类名匹配的表。 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'

Answer 2

与提及的一条评论一样，如果'tbody tr.' + this.className有多个类，this会生成无效的选择器。

为什么你要尝试获得一个类等于你点击的标签的行，这有点令人困惑。也许看一下jQuery的DOM导航方法。父母和父母特别是：

http://api.jquery.com/parent/

http://api.jquery.com/parents/

如果你绝对必须做你想做的事情，那么修复就是用this.className中的句点替换空格。因此，您可以修改代码来执行此操作：

'tbody tr.' + this.className.replace(/ /g,'.')

用jQuery查找IE7问题？

2 个答案: