jQuery 仅适用于 Firefox - 事件模型问题？

Question

我不是 jQuery 专家，但我设法在http://www.bringmyshuttle.com 的 WordPress 网站首页上运行了我所需的效果

在 FF 中查看，一切正常；选择一个选项时，将其他过滤器重置为“全部”，并且正确的拇指逐渐消失/保留。

在 IE 或 Safari 中，什么都没有……我在 Mac localhost 上构建了 FF 和 Safari，我确信它至少在某些时候适用于 Safari……我希望 IE 很难，但不是“体面”浏览器。

但正如我所说，对 Javascript/jQuery 来说非常新，并且肯定我犯了一个基本错误..但也请阅读每个浏览器都有不同的事件模块..eeesh，CSS hacking 已经够糟糕了，是不是JS开发也很痛苦？

这是我正在使用的 js。如果有人能指出我正确的方向，哦，我会很感激，因为这个正在融化我的大脑:)

$(document).ready(function() {

    $("select").each( function(){
        $(this).val( $("#" + $(this).attr("id") + " option:first").val() );
    });

    $('ul.filter option').click(function() {
        $(this).css('outline','none');
        $('ul.filter .current').removeClass('current');
        $(this).parent().addClass('current');

        $("select:not('.current')").each( function(){
            $(this).val( $("#" + $(this).attr("id") + " option:first").val() );
        });

        var filterVal = $(this).text().toLowerCase().replace(' ','-');
        var filterWp = 'category-'+filterVal;

        if(filterWp == 'category-all') {
            $('div.post').animate({opacity: 1})
                         .removeClass('unselected')
                         .addClass('selected');
        } else {
            $('div.post').each(function() {
                if(!$(this).hasClass(filterWp)) {
                    $(this).animate({opacity: 0.2})
                           .removeClass('selected')
                           .addClass('unselected');
                } else {
                    $(this).animate({opacity: 1})
                           .removeClass('unselected')
                           .addClass('selected');
                }
            });
        }
        return false;
    });
});

Answer 1

我觉得IE不支持option点击？

尝试将$('ul.filter option').click 更改为$('select').change。

您需要在 change 函数中更改 this 的引用，因为现在它将引用 select box 而不是 option 本身。