Question

我正在使用容器中随机背景图片的网站。每次加载网站时，都会生成一个由php脚本生成的不同图像。当PHP脚本随机选择1.jpg来显示时，我希望将bg1.png用作背景图像。如果PHP脚本随机选择2.jpg来显示，我希望bg2.png用作背景图像。

这是我已经制作的jQuery。但我无法找到一种方法如何调用div的值，称为背景

jQuery：

$(document).ready(function() {

if ($("#background").attr("value") == 1) {
$(body).css("background-image", "url(images/bg/bg1.png);");
}

else if ($("#background").attr("value") == 2) {
$(body).css("background-image", "url(images/bg/bg2.png);");
}

else if ($("#background").attr("value") == 3) {
$(body).css("background-image", "url(images/bg/bg3.png);");
}

else if ($("#background").attr("value") == 4) {
$(body).css("background-image", "url(images/bg/bg4.png);");
}

else if ($("#background").attr("value") == 5) {
$(body).css("background-image", "url(images/bg/bg5.png);");
}

else if ($("#background").attr("value") == 6) {
$(body).css("background-image", "url(images/bg/bg6.png);");
}

else {
$(body).css("background-image", "url(images/bg.png);");
}
});

The Php：

echo "<div id='background' value=\"$random\"><img src=\"$image_folder/$image_name\" alt=\"$random\" /></div>";

Answer 1

您现在正在做的事情非常愚蠢，请考虑通过回显PHP中的代码来设置背景。例如：

<style>
body
{
 background-image: url("images/bg<?php echo rand(0,7); ?>.png");
}
</style>

此处不需要任何客户端处理。

Answer 2

$(function() {
    var mainImage = $("#background").attr("value");
    $("BODY").css("background-image", "url(images/bg/bg" + mainImage + ".png)");
});

这可以通过PHP很容易地实现 - 特别是因为你已经生成了文件名中使用的数字。

我还建议在您的div上使用rel属性，因为value无效。

Answer 3

您不应该在div中使用自定义属性。正确的方法是查看src代码

中的img属性

$("#background img").attr("src")

获得div值的最佳方法是什么？

3 个答案: