0

所以我正在编写一个 jQuery 插件来应用视网膜图形。我需要选择一个元素（如果它有背景图像或源图像），然后选择其中的每个元素（如果它有背景图像或源图像）。

这是我的插件：

//RetinizeJS
(function($){
    $.fn.retinize = function(){
    $(this).filter(function(){
        if (this.currentStyle) 
            return this.currentStyle['backgroundImage'] !== 'none';
        else if (window.getComputedStyle)
            return document.defaultView.getComputedStyle(this,null)
                .getPropertyValue('background-image') !== 'none';
    }).addClass('bg_found');
    };
})(jQuery);

$('body').retinize();

如果它具有背景图像，则需要返回 body 元素，如果它们是<img src="" />或如果它们具有 CSSbackground-image属性，则需要返回其中的所有元素。

我怎样才能做到这一点？

更新晚上 9 点 13 分：

这不会将类 HAS_IMAGE 添加到任何东西，<img>如果我删除它仍然不会选择元素|| ($this.css('backgroundImage') !== 'none');。

//RetinizeJS
    (function($){
        $.fn.retinize = function(){
            $this = $(this);
            $this.find('*').andSelf().filter(function(){
                return $this.is('img') || ($this.css('backgroundImage') !== 'none');
        }).addClass('HAS_IMAGE');
    };
    })(jQuery);

    $('body').retinize()
4

1 回答 1

1

您可以使用 . 检查元素是否具有特定的 CSS 规则值.css()。我在想（即未经测试），通过检查.css('backgroundImage')，您应该能够检查元素是否具有背景图像，无论它是使用 CSSbackground还是 CSS设置的background-image。

您可以使用该知识来设置过滤器功能，如下所示：

$(selector).filter(function () {
    var _this = $(this);
    return _this.is('img') || (_this.css('backgroundImage') !== 'none');
});

您只需要研究如何使用您的插件将其级联到后代中。

但是，如果您必须严格检查from<body>，那么扩展$.fn听起来像是错误的方法。$.fn扩展适用于作用于 jQuery 对象的函数，例如$('body').retinize()或$('div img').retinize().

您可能希望通过直接扩展来使其成为实用函数，因此您可以通过或其他$方式调用它。$.retinize()

于 2012-06-21T03:56:15.973 回答