为跨浏览器灰度过滤器修改 jQuery 选择器答案

【问题标题】：Modifying jQuery selector for cross browser grayscale filter为跨浏览器灰度过滤器修改 jQuery 选择器
【发布时间】：2014-01-06 23:16:36
【问题描述】：

希望使用 this 跨浏览器灰度过滤器并让它适用于所有图像，但我想将效果限制在单个 div 中的图像。

在 function.js 中，我从 grayscale($('img')); 更改了选择器的所有实例到grayscale($('#grayscale-div img')); 并且在所有情况下都这样做了。它正在添加 CSS 类，但在 IE11 中效果不再起作用。

我正在尝试查看这是否是我在使用 jQuery 选择器时所犯的错误。提前感谢您为我指明正确的方向。

代码摘录：

if (getInternetExplorerVersion() >= 10){
    $('#grayscale-div img').each(function(){
        var el = $(this);
        el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"5","opacity":"0"}).insertBefore(el).queue(function(){
            var el = $(this);
            el.parent().css({"width":this.width,"height":this.height});
            el.dequeue();
        });
        this.src = grayscaleIE10(this.src);
    });

    // Quick animation on IE10+ 
    $('#grayscale-div img').hover(
        function () {
            $(this).parent().find('img:first').stop().animate({opacity:1}, 200);
        }, 
        function () {
            $('.img_grayscale').stop().animate({opacity:0}, 200);
        }
    );

【问题讨论】：

标签： css debugging jquery-selectors internet-explorer-11

【解决方案1】：

getInternetExplorerVersion() 条件检查在 IE11 中失败。以下变化：

if(getInternetExplorerVersion() >= 10 || !!window.MSInputMethodContext)

将在上面显示的代码中修复它。以下是一些不相关的问题，可以解释问题和解决方案：

【讨论】：