IE7 проблема с jQuery найти?

Следующий код работал отлично в IE7, пока не начал использовать файл IE9.js. Файл IE9.js добавляет дополнительный класс "ie7_class82" к уже существующим классам, которые я добавил. Приведенный ниже код перестает работать в IE7. Есть ли известная проблема с неспособностью найти соответствующие классы с jQuery, когда присутствуют несколько классов?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(); 
      });

источник

2012-06-21 neelmeg

'IE9.js'? IE9 - это браузер, а не javascript. Это плагин или что-то еще, или вы запутались? – gdoron

@gdoron Я думаю, что это его файл js, который имеет исправления для IE –

@gdoron google ie9.js он похож на ie7.js или http://code.google.com/p/ie7-js/ – Huangism

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-21 14:18:13

Я думаю, что это, вероятно, вызовет проблему, будет обновляться, как только я получу ее работу. – neelmeg

очень хорошее мышление! ценить это. – neelmeg

Удивительно, что он работал с использованием var classSelector, спасибо за поддержку SO community! – neelmeg

Как один комментарий упоминалось, 'tbody tr.' + this.className будет генерировать недействительный селектор, если this имеет более одного класса.

Это немного запутанно, почему вы пытаетесь получить строку с классом, равным метке, на которую вы нажимаете. Возможно, взгляните на методы навигации DOM для jQuery. В частности родители и родители:

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

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

Если Вы абсолютно должны делать то, что вы пытаетесь сделать, то исправление будет заменить пробелы с периодами в this.className. Таким образом, вы можете изменить свой код, чтобы сделать это:

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

источник

2012-06-21 14:18:01 Milimetric

IE7 проблема с jQuery найти?

ответ

Смежные вопросы