Question

我使用带有一点CSS3动画的通用CSS横幅代码（不是重点，而是提供背景）。我想要实现的是使用自定义属性设置banner类并获取该属性内容并使用jQuery附加样式？像这样，然而他们的很多这些div将在同一页面上使用相同的技术......

<div class="banner banner-small animate" data-bg="https://domain.com/path/img/bg.png">
    ....
</div>

然后jQuery将运行并输出代码，如...

<div class="banner banner-small animate" data-bg="https://domain.com/path/img/bg.png" style="background-image: url('https://domain.com/path/img/bg.png')">
    ....
</div>

我希望这不是模糊的。我最近才开始学习jQuery而且我很喜欢它！我真的不知道如何去做这件事。

Answer 1

当然，您可以通过多种方式将数据属性用作选择器，然后通过data()函数访问其数据：

// Iterate through each element with the data-bg attribute
$('[data-bg]').each(function(){
     // Set the background image for each element to it's respective
     // attribute value
     $(this).css('background-image','url(' + $(this).data('bg') + ')');
});

或者，如果您不想两次调用jQuery，可以使用Niet的建议：

$('[data-bg]').each(function(){
     this.style.backgroundImage = url(' + this.getAttribute('data-bg') + ')';
});

或来自adeneo的以下内容，它完全放弃了显式循环：

$('[data-bg]').css('background-image', function() {
     return 'url(' + $(this).data('bg') + ')';
});

使用自定义attr添加css？

1 个答案: