javascript - 以 Object 格式设置 css 时使用 $(this) 和 data attr

Question

我在使用 jQuery/CSS/data 属性设置背景时遇到问题。我没有正确重构代码，可能会找到更好的解决方案，但想知道为什么这不起作用......解释起来有点困难......见下文

$('.promoCarousel').find('.image').each(function(){
    $(this).css({
        'background-image': $(this).attr('data-mob-src'), // DOESNT SET BACKGROUND IMAGE 
        'width' : 288,
        'height' : 288
    })
    $(this).addClass("mobview");
});

是因为我将 $(this) 与 $(this) 一起使用吗？

Answer 1

设置$(this)为局部变量并引用它。

无论如何，您都应该在多次调用时这样做，$(this)因为从局部变量读取性能会更好。

另外，我的猜测是您没有包含url()在data-mob-src财产价值中。我建议将其连接起来，如下例所示：

$('.promoCarousel').find('.image').each(function(){
    var $this = $(this);
    $this.css({
        'background-image': 'url(' + $this.attr('data-mob-src') + ')', 
        'width' : 288,
        'height' : 288
    })
    $this.addClass("mobview");
});

Answer 2

If you are using HTML5 data-, use .data(key)

replace

$(this).attr('data-mob-src')

with

$(this).data('mob-src')

---

EDIT: added live example

jsFiddle code