JavaScriptを使用してdivのデータフィールドに従って画像の背景を設定します。

Question

すべてのクラス名が同じdivの束の背景画像を設定しようとしています。しかし、私は各部門が異なる背景イメージを持つようにしたい。ここに私が思い付いたものです：

HTML：

<div class="element-item" data-img="imageName.svg"> 
    <h3 class="name">Name</h3> 
    <p class="symbol">&</p> 
    <p class="number">#</p> 
</div> 

はJavaScript：

$(document).ready(function(){ 
// DOM is ready here 

    $("div.element-item").each(function(){ 

     $(this).css({"background-image", "url("+"/path/[data-img]"+")"}); 

    }); 
}); 

$(this).css({"background-image"**, "url("+"/fabric/images/[data-img]"+")"});** 

エラー：

Error: Uncaught SyntaxError: Unexpected token , on

Answer 1

最初の問題は、data属性を連結する必要があることです。あなたが持っている通りに[data-img]を実行することで、文字列に含めることはできません。

さらに、jQuery css()関数には、2種類の引数があります。.css(property, value)または.css({property:value, property:value, ... })のいずれかを指定できます。あなたはこれら二つを混ぜ合わせたように見え、代わりに{property,value}のオブジェクトを渡しています。ここで

$("div.element-item").each(function(){ 
    var imgUrl = "/path/" + $(this).data("img"); 
    $(this).css("background-image", "url(" + imgUrl + ")"); 
}); 

Answer 2

使用.data()を使用してdata-img属性にアクセスします。

は、文字列連結で[data-img]を使用してデータ属性を追加できません。 .data（ "img"）メソッドを使用してdata-img属性値を取得し、文字列に追加します。

 
$(document).ready(function(){ 
// DOM is ready here 

$("div.element-item").each(function(){ 
    var dataImage = '/path/' + $(this).data('img'); 
    $(this).css("background-image", "url(" + dataImage + ")"); 

}); 

Answer 3

は、あなたがあなたの `.css`のカーリーbracksを持って.ATTR機能

$(document).ready(function(){ 
    $("div.element-item").each(function(){ 
      var $dataImage=$(this).attr("data-img"); //notice the .attr function 
      $(this).css("background-image", "url('/path/" + $dataImage + "')"); 

     }); 
});