1

在我开始使用 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();
            });
4

2 回答 2

2

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'
于 2012-06-21T14:18:13.370 回答
0

就像提到的一条评论一样，如果有多个类，'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,'.')
于 2012-06-21T14:18:01.103 回答