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>

我显然做错了，因为我无法让它发挥作用。

这也是WordPress。因此，如果我像这样设置和内联背景图像，它可以工作：

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

但我想使用jQuery随机设置背景图像。这甚至是可能的吗？

非常感谢任何帮助。

Answer 1

此代码失败的原因是，当从服务器请求页面时，<?php echo get_template_directory_uri(); ?>可以仅进行评估。（PHP是server side语言。）

因此，当使用jQuery动态生成时，这一行没有任何结果：

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

但是，如果您将<?php echo get_template_directory_uri(); ?>替换为get_template_directory_uri();的返回值，则表示以下内容：

$('#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张图片，您可以这样做：

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

基本上你可以创建1到7之间的随机数，然后将该数字添加到bg和.jpg中，例如bg5.jpg

随机设置背景图像

2 个答案: