Php 使用while循环会更好吗？不'；这难道不是多余的吗？

我正在尝试创建一个随机背景图像选择器。我所拥有的工作，但它似乎笨重和多余。我能得到帮助想出一个更好的方法来写这个吗

要求：

• 每次打开页面时都应显示页面的随机背景 刷新
• 每个背景都有一个特定的文本简介，因此 每个背景都需要显示正确的文本
• 有一个显示其他背景/文本的链接列表 当前显示的背景/文本不应列在 索引

示例：如果正在显示background3.jpg，则列表中应该只有background1.jpg、background2.jpg和background4.jpg

PHP

$backgrounds=
排列(
‘cat1.jpg’、‘cat2.jpg’、‘cat3.jpg’、‘cat4.jpg’、‘cat5.jpg’、‘cat6.jpg’；//图像文件数组
$randBg=rand（0，计数（$backgrounds）-1）；//生成数组的随机数大小
$selectedBg=“$backgrounds[$randBg]”；//将变量设置为所选的随机文件名
$strings=array（‘这只小猫有过滤器’、‘这只猫在黑暗中’、‘这只小猫有绿色的眼睛’、‘这只猫有面具’、‘这只脾气暴躁的猫’、‘这只猫是橙色的’）；//对应于每个图像的字符串数组
函数showString（$backgrounds、$randBg、$strings）{
对于（$b=0；$b

HTML

过滤器
黑暗
绿色的眼睛
面具
脾气暴躁
橙色

CSS

正文{
/*随机选择的背景图像*/
背景图片：url（图片/）；
背景尺寸：封面；
背景重复：无重复；
}
div#text{/*来自各个背景图像的文本进入这个div*/
背景色：rgba（255、255、255、0.8）；
宽度：50%；
利润率：10%自动0自动；
显示：块；
文本对齐：居中；
填充：25px；
}
div#text h1{
颜色：#000；
}
div#index{/*使用此菜单查看其他背景图像*/
背景色：rgba（255、255、255、0.8）；
宽度：50%；
位置：绝对位置；
左边距：自动；
右边距：自动；
底部：0；
}
div#index ul{
列表样式类型：无；
溢出：隐藏；
}
部门指数{
浮动：左；
填充：25px；
}
div#index ul li:悬停{
背景色：#000；
颜色：#fff；
光标：指针；
}

jQuery

var selected = $("li"); // make var for the list items
var bgsArray = [1, 2, 3, 4, 5, 6]; // make array of backgrounds
var strings = [ // make array of strings
    "This kitten has a filter", 
    "This cat is in the dark", 
    "This kitten has green eyes", 
    "This cat has a mask", 
    "This is Grumpy Cat", 
    "This cat is orange"
    ];
var current = bgsArray[Math.floor(Math.random() * bgsArray.length)]; // get a background image randomly (can't be anything else or else the initial image is always the same on reload).
if ($("body").css("background-image", "url('images/cat" + current + ".jpg')")) { // check current background image against the random number
    $("div#text h1").html("" + strings[current - 1]); // make sure correct text displays
    $("li#" + current).css("display", "none"); // hide current displaying bg in index
    $("li#" + current).siblings().css("display", "block"); // make sure all other index values are showing
}

$.each(selected, function() { // function to iterate through all list items
    selected.click( function() { // function for clicking on list item

        var li_id = $(this).prop("id"); // get the id of the <li> that was just clicked
        var cssBg = "url('images/cat" + li_id + ".jpg')"; // create string for bg url with id
        $("body").css("background-image", cssBg); // change page bg to new image with corresponding id
        $("div#text h1").html("" + strings[li_id - 1]); // change the text
        if ($("body").css("background-image", cssBg)) { // hide the <li> for the bg that's currently displaying, but show all others
            $("li#" + li_id).css("display", "none");
            $("li#" + li_id).siblings().css("display", "block");
        }
    });
});

var selected=$（“li”）；//为列表项生成var
var bgsArray=[1,2,3,4,5,6]；//制作背景阵列
var strings=[//生成字符串数组
“这只小猫有一个过滤器”，
“这只猫在黑暗中”，
“这只小猫有绿色的眼睛”，
“这只猫有面具”，
“这是一只脾气暴躁的猫”，
“这只猫是橙色的”
];
var current=bgsArray[Math.floor（Math.random（）*bgsArray.length）]；//随机获取背景图像（不能是任何其他图像，否则重新加载时初始图像始终相同）。
if（$（“body”）.css（“背景图像”，“url（'images/cat“+current+”.jpg'））{//对照随机数检查当前背景图像
$（“div#text h1”）.html（“+strings[current-1]）；//确保显示正确的文本
$（“li#“+current）.css（“display”，“none”）；//在索引中隐藏当前显示的背景
$（（“li#“+current）.sides（）.css（“display”，“block”）；//确保显示所有其他索引值
}
$.each（选中，function（）{//function以遍历所有列表项
选中。单击（函数（）{//用于单击列表项的函数
var li_id=$（this）.prop（“id”）；//获取刚刚单击的
的id
var cssBg=“url（'images/cat“+li_id+”.jpg'）；//为具有id的bg url创建字符串
$（“body”）.css（“背景图像”，cssBg）；//将页面bg更改为具有相应id的新图像
$（“div#text h1”）.html（“+strings[li#u id-1]）//更改文本
if（$（（“body”）.css（“background image”，cssBg））{//隐藏当前显示的bg的
，但显示所有其他
$（“li#“+li#id）.css（“显示”、“无”）；
$（“li#“+li#u id）.slides（）.css（“显示”、“块”）；
}
});
});

我的目标是学习如何将重构概念化（如果有意义的话），因为我知道有一种更简洁的方法来编写它。PHP和jQuery都是必需的吗？我应该使用AJAX吗？在初始页面加载之后，我使用jQuery最小化HTTP请求。如果使用一种语言更有效，我宁愿那样做。谢谢你的一切帮助

如果知道数组中元素的

键

，则无需循环键即可获得值，只需获得值：

mt_rand函数比rand函数好

如果要从数组中获取随机元素，可以使用

array\u rand

函数：

---

从您的描述中不完全确定，但似乎您不需要php。您可以仅使用JS显示随机图像。此外，使用地图将图像连接到文本的模糊部分更为清晰

例如：

var imageToText = {
 "imageNameA": "cat text A", 
 "imageNameB": "cat text B",
 ... 
}

流程：根据地图的大小，获取imageName+对应的文本

此外，还将稍微讨论一下事件处理程序

你有：

var selected = $("li"); // make var for the list items
...
$.each(selected, function() { // function to iterate through all list items
    selected.click( function() { // function for clicking on list item
    ...
   })
 })

这可以重构为：

$("li").click(function(){
  var $el = $(this);
  //do something... 
})

---

hth

1.）我觉得忽视这一点很愚蠢。2.）即使是这样小的范围，它是否更好？3.）甚至都不知道那个数组。非常感谢。它是针对PHP的。我还试图弄清楚jQuery。兰德山更好。3.欢迎来到php世界：）太棒了。这很有帮助。非常感谢。

$randBg = mt_rand(0, count($backgrounds)-1);

$key = array_rand($backgrounds);
$backgrounds[$key]; // this is the random-background you want

var imageToText = {
 "imageNameA": "cat text A", 
 "imageNameB": "cat text B",
 ... 
}

var selected = $("li"); // make var for the list items
...
$.each(selected, function() { // function to iterate through all list items
    selected.click( function() { // function for clicking on list item
    ...
   })
 })

$("li").click(function(){
  var $el = $(this);
  //do something... 
})

$h1 = $strings[$randBg];//will return correct string for the BG