ShopifyのjQueryコード内の画像のアセットURLパスを表示する方法

Question

アセットフォルダから画像を動的に取得しようとしています。私のコードのプロセスは、要素がクリックされると、その親要素は、子要素IDによって渡された名前に従って背景を変更するということです。私はtheme.js.liquidために私theme.jsの名前を変更した

$(".flex-item").click(function() { 
    // add class to div while removing it from others with same class 
    $(".flex-item").removeClass("expand").addClass("vertical"); //declare the class of the element, remove expand class from all 
    $(this).addClass("expand").removeClass("vertical"); //add class to clicked element 
    var changebackground = $(this).attr('id'); //get id of clicked element 
    $("#vaq-key-features-img").css({ 
    "background-image": "url({{ '"+changebackground+".jpg' | asset_url }})", 
    }); 
}); 

：以下の私のコードを参照してください。 URLが返されていますが、jquery変数が文字列として読み込まれていて、値が表示されていません。下記を参照してください：

<div class="container" id="vaq-key-features-img" style="background-image: url(https://cdn.shopify.com/s/files/1/1392/6087/t/3/assets/%22+changebackground+%22.jpg?8438893007511141278);"></div> 

何かが欠けていますか？

Answer 1

は私がES6 template literalを使用しました。この

$("#vaq-key-features-img").css({ 
    "background-image": `url("${changebackground}.jpg" | ${asset_url})`, 
}); 

のようなものを試してみてください。

あなたはES6が

var bgurl = "url('" + changebackground + ".jpg')"; 
$("#vaq-key-features-img").css({ 
    "background-image": bgurl, 
}); 

を試し、その後はサポートされません古いブラウザを使用している場合、これはあなたを助けることを願っています。

Answer 2

液体フィルター内で変数を渡すことについて話しているShopifyフォーラムのトピックを見つけたところ、liquid filtersはサーバー側の言語なので、不可能であることがわかりました。私は親コンテナ内にデータ属性を追加しました。この属性は、子divによって渡されるid-nameを保持します。

$(".flex-item").click(function() { 
    // add class to div while removing it from others with same class 
    $(".flex-item").removeClass("expand").addClass("vertical"); //declare the class of the element, remove expand class from all 
    $(this).addClass("expand").removeClass("vertical"); //add class to clicked element 
     var databg = $(this).attr('id'); //get id of clicked element 
    $("#vaq-key-features-img").attr('data-bg', databg); //pass id as data to container 
}); 

特定データとDIVを選択し、CSS属性セレクタを使用して背景を変更：CSSファイルや画像を液体フィルタが使用してパスを指定し、同じShopifyアセットフォルダに格納されているので

div[data-bg="key-feature-01"]{ 
    background-image:url('images/key-feature-01.jpg') !important; 
} 
div[data-bg="key-feature-02"]{ 
    background-image:url('images/key-feature-02.jpg') !important; 
} 
div[data-bg="key-feature-03"]{ 
    background-image:url('key-feature-03.jpg') !important; 
} 
div[data-bg="key-feature-04"]{ 
    background-image:url('key-feature-04.jpg') !important; 
} 
div[data-bg="key-feature-05"]{ 
    background-image:url('key-feature-05.jpg') !important; 
} 
div[data-bg="key-feature-06"]{ 
    background-image:url('key-feature-06.jpg') !important; 
} 

もう必要ありません。