Использование пользовательского attr для добавления css?

Question

Я использую общий код CSS-баннера с небольшой анимацией CSS3 (не пункт, а предоставление фона). То, что я пытаюсь достичь, - это установить класс баннера с помощью настраиваемого атрибута и получить содержимое этих атрибутов и использовать jQuery для добавления стиля с ним? Как это так, однако их это много этих дивы, которая будет использовать ту же технику, на той же странице ...

<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 «s:

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

или следующий один из adeneo, который воздерживается в явном виде цикл полностью:

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