javascript - IE8 中的 MediaWiki/jQuery 交替表行颜色

Question

• MediaWiki 1.21
• jQuery 1.8.3(MediaWiki 附带)

我试图避免使用 jQuery Tablesorter，因为 ['zebra'] 小部件不起作用。解决方案应该适用于 IE8 浏览器以及更新的浏览器。

CSS:Mediawiki:Common.css

/*--- 
    Color scheme looks like an excel table :D
--- */
.mytable {
  border-collapse: collapse; 
  border: 1px solid #AAAAAA;
}

.mytable tbody tr td {
  border: 1px solid #AAAAAA; 
}

.mytable tbody tr th {
  border: 1px solid #AAAAAA;
}

.even {
  background-color: #DCE6F1;
}

.odd {
  background-color: #FFFFFF;
}

.head {
  background-color: #4F81BD;
  color: #FFFFFF;
}

JavaScript:Mediawiki:Common.js

$(document).ready(function() {
    $(".mytable tr:nth-child(even)").addClass('even');
    $(".mytable tr:nth-child(odd)").addClass('odd');

    $(".mytable tr").live('click', function() {
        If ($(this).hasClass('even')) {
            $(this).removeClass('even');
        }
        else if ($(this).hasClass('odd')) {
            $(this).removeClass('odd');
        }
        else {
        $(".tablesorter").trigger('update');
        }
    });
});

错误总是一样的

“JavaScript 解析错误:解析错误:缺少；第 12 行文件‘Mediawiki:Common.js’中的语句之前”

当我使用其内置的开发人员工具查看 IE8 中发生的情况时，我真正看到的是 jscript 没有添加类。我已经尝试了此站点上另一个问题 [1] 的几种解决方案，但无法让它们中的任何一个适用于 IE8。奇怪的是它最近在 6 月 27 日还在工作……我什至对以下问题发表了评论，感谢其中一位贡献者。

如何让这个 css 注入(inject)适用于 IE8？

更新:

如果这在 chrome 中也能正常工作，我修改了脚本以专门进行故障排除。我删除了一些可能正在使用更现代的浏览器为脚本工作的 css，现在我什至无法在 Chrome 中使用以下内容。

$(document).ready(function() {
    $(".mytable tr:nth-child(even)").addClass("even");
    $(".mytable tr:nth-child(odd)").addClass("odd");
    $(".mytable tr:first-child th").addClass("head");
});

这是我在 mediawiki 中使用的表格示例，我在其中添加了 mytable 类。目标是在浏览器加载时设置表格样式，最好仅在 jquery 中，以便 IE 保持兼容，并在表格排序时重新应用样式(因此有上面的点击功能)。

{| class="mytable sortable"
! Special Interval <br /> (In Seconds)
! Human Readable Time
|-
| 1
| 1
|-
| 60
| 1 minute
|-
| 600
| 10 minutes
|- 
| 900
| 15 minutes
|-
| 1800
| 30 minutes
|-
| 3600
| 1 hour
|-
| 21600
| 6 hours
|-
| 43200
| 12 hours
|-
| 86400
| 24 hours
|}

[1] jquery tablesorter plugin - retain alternative row colors

(编辑:在下面添加最终解决方案。粘贴到 MediaWiki:Common.js 中)

/*--------------------------------------------------|
| Alternate row styling for myTable class (IE)      |
|--------------------------------------------------*/

$( document ).ready( function() {

    function fixStripes() {

        /* setTimeout() adds a 1ms delay so Mediawiki's tablesorter 
        caching doesn't overwrite the class changes applied manually */
        setTimeout( $.proxy( function() {  

            $( '.mytable' ).find( 'tr' ).removeClass( 'even odd head' )
                .filter( ':even' ).addClass( 'even' ).end()
                .filter( ':odd' ).addClass( 'odd' ).end()
                .filter( ':has(th)' ).addClass( 'head' );

        }, this), 1);
    }

    /* On load */
    fixStripes();

    /* When the table header is clicked, reapply striping */
    $( '.mytable th' ).click( function() {
        fixStripes();
    } );

} );

Answer 1

我认为问题在于您的“elseif”。您需要为 Javascript 使用“else if”。此外，您需要关闭最后一个括号 - “else {”。