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では正常に動作します）。すべてのテーブルを非表示にし、labelタグに存在するクラス名に一致するテーブルのみを表示することになっています。IE7はすべてのテーブルを非表示にしますが、クラスに一致するテーブルを表示できません。

更新されたコード（SOのおかげでIE7で動作します）：

$('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.classNameclassie7の場合、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

前述の1つのコメントのように、複数のクラスがある'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 に答える