ランダムに背景画像を設定する

Question

だから、要素上に背景画像をランダムに設定したい。ここで

は、私がしようとしているものです：

<div id="headImg"></div> 

<script> 

    $(document).ready(function() { 

    var images = ['bg.jpg', 'bg2.jpg', 'bg3.jpg', 'bg4.jpg', 'bg5.jpg', 'bg6.jpg', 'bg7.jpg', 'bg8.jpg']; 

    $('#headImg').css('background-image', 'url(<?php echo get_template_directory_uri(); ?>/assets/images/' + images[Math.floor(Math.random() * images.length)] + ')'); 

    }); 

</script> 

私はそれが仕事を得るカント以来、私は明らかに間違って何かをやっています。

これはワードプレスです。だから私は設定して、このようなインライン背景画像ならば、それは動作します：

style="background-image: url(<?php echo get_template_directory_uri(); ?>/assets/images/bg.jpg);" 

しかし、私はランダムに背景画像をインラインで設定するためにjQueryのを使用したいです。これも可能ですか？

ご協力いただきまして誠にありがとうございます。

Answer 1

<?php echo get_template_directory_uri(); ?>は、サーバーからページが要求されたときに評価されるためです。

：しかし、あなたはこれを形成するために、 get_template_directory_uri();の戻り値で <?php echo get_template_directory_uri(); ?>を交換し、場合

$('#headImg').css('background-image', 'url(<?php echo get_template_directory_uri(); ?>/assets/images/' + images[Math.floor(Math.random() * images.length)] + ')'); 

：（。PHPはserver side言語です）

そこで、このラインは、動的にjQueryを使って生成された何も達成していません

$('#headImg').css('background-image', 'url((return value here)/assets/images/' + images[Math.floor(Math.random() * images.length)] + ')'); 

コードが正しく実行されます。

編集：あなたは私のポスト以下のコメントからもわかるように

、人々は言った - 当然のように - 特定のケースでは、彼のコードがが働いてきたであろう。

しかし、PHPが埋め込まれているコードは、コードが要求されているファイル内にある場合にのみ機能します。 （つまり、別のページの外部コードではなく、インラインコードです）。この場合、jQueryはで、同じファイル内にではありませんでした。そのため、問題のPHPタグを削除する必要がありました。総集編で

：Javascriptを要求したの.phpファイルではなかったので

この解決策が必要でした。したがって、PHPタグは評価されませんでした。 （PHPタグはjavascriptファイルでは何も意味しません）。

しかし、javascriptが要求されたPHPファイルに含まれていたとしたらうまくいきました。

Answer 2

あなたが7つのイメージを持っているので、あなたは多分ちょうどこのようにそれを行うことができます。基本的にはちょうどそのBGにその番号を追加し、1と7の間の乱数を作成し、.JPG例えばBG5でき

var rand = Math.floor(Math.random() * 7) + 1; 
$('#headImg').css('background-image', 'url(<?php echo get_template_directory_uri(); ?>/assets/images/bg' + rand + '.jpg)'); 

。 jpg