2017-01-15 4 views
0

URLを写真に設定し、その写真で選択したdivの背景画像を変更する機能を作成したかったのです。例えば画像を変更する機能が動作しませんなぜ

function changePhoto(id) { 
      var y = document.getElementById("baza_big_photo"); 
      y.style.display = "block"; 
      var z = '"' + "url(" + "'" + "./assets/min_images/" + id + ".jpg" + "'" + ")" + '"'; 
       y.style.backgroundImage = z; 
       console.log(z); 
     } 

、私はパラメータとしてtn_baza01(写真の名前を)送るが、画像は私の大きなdivの中に表示されていない:(

私はIDが異なると、一つの大きな上で20件の小さなdiv要素を持っていますその上で。私は小さな画像をクリックするとその画像に大きなdiv要素の背景画像を変更する必要があります。

+2

なぜ上のすべての連結のを修正する必要がありurl(..)"

をラップするべきではありませんURL?なぜ、単に 'z = 'url("/assets/min_images /' + id + '。jpg ")'をしないのですか?問題ではないかもしれませんが、少なくともコードを少し簡略化します。 console.logは何を返しますか? – junkfoodjunkie

+1

周囲の引用符を取り除く '' ' –

+0

@junkfoodjunkieそれは問題だと思うよ。良い推測のために+1 –

答えて

0

そう

var z = "url('./assets/min_images/" + id + ".jpg')"; 

にそれを変更しても問題

+0

ありがとう!!! –

0

var zにおける連結は"url('./assets/min_images/tn_baza01.jpg')"のような文字列を作成して、先頭/末尾の引用符は無効です。

更新それ これまでのラインは、主要/末尾の引用符

var z = "url(" + "'" + "./assets/min_images/" + id + ".jpg" + "'" + ")"; 

を削除するには、それが url('./assets/min_images/tn_baza01.jpg')

のような文字列を限り画像のパスが有効であるとして、それが正常に動作する必要が作成されます。

function changePhoto(id) { 
 
      var y = document.getElementById("baza_big_photo"); 
 
      y.style.display = "block"; 
 
      var z = "url(" + "'" + "./assets/min_images/" + id + ".jpg" + "'" + ")"; 
 
      y.style.backgroundImage = z; 
 
     } 
 

 
changePhoto('tn_baza01');
<div id="baza_big_photo"></div>

関連する問題