動的に背景画像を変更する(Ruby on rails,JavaScript)

はじめに

画像アドレスを入力することで、
背景画像を動的に変更する方法について書いていきます

実行

基本となるビューファイルは次のようにします。

wall.haml.html

.body
  = text_area "object_name", {class: "wall-url"},{id: "wall-url"} 
  .wall-btn 画像を変える 

texr_areaが画像アドレスを張り付ける部分で、.wall-btnを押したら画像を変わるものとします。

次にJavaScriptです。（jQueryで書いています）

wall.js

$(function(){
  $(".wall-btn").on("click",function(){ 
  }) 
});

これで、.wall-btnをクリックした時に発火する関数ができました。
次は、処理の内容を書いていきます。

wall.js

$(function(){
  $(".wall-btn").on("click",function(){ 
    var image = $("#wall-url").val(); 
  }) 
});

これでテキストエリアに入力された画像アドレスを取得し、変数imageに代入できます。
テキストエリアのidがwall-urlとなっているので、#wall-urlの中身を取得するようにすればよいわけです。

最後に、背景画像を取得した画像アドレスのものに変更します。

wall.js

$(function(){
  $(".wall-btn").on("click",function(){ 
    var image = $("#wall-url").val(); 
    $(".body").css('backgroundImage',`url("${image}")`); 
  }) 
});

注意するところは、background-imageを変更する処理ですが、
ここではbackgroundImageとなっているところです。
-がなくなって、直後の文字が大文字になっているわけですね。

url("${image}")の部分は、''で囲むと${image}がただの文字列と表示されるので、この表記にしています。
また、url(${image})としてもエラーになるので、必ず""をつける必要があります。