javascript - 使用javascript在php页面上制作 'onClick'切换到php数组中的随机url

Question

我希望它的工作方式如下: 如果您单击 image1，image2 将更改为我的数组中的随机 url。如果您单击 image2，那么它将更改 image1。

这是我当前的代码:

<img alt="" src="<?php echo $new_array[mt_rand(1, 53)]['var']; ?>"     style="height: 276px; width: 200px" id="imgClickAndChange1"       onclick="changeImage2()" />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img alt="" src="<?php echo $new_array[mt_rand(1, 53)]['var']; ?>"      style="height: 276px; width: 200px" id="imgClickAndChange2"    onclick="changeImage1()" />
<script language="javascript">

function changeImage1() {
    var image = document.getElementById('imgClickAndChange1');
    image.src = "<?php echo $new_array[mt_rand(1, 53)]['var']; ?>";
}

function changeImage2() {
    var image = document.getElementById('imgClickAndChange2');
    image.src = "<?php echo $new_array[mt_rand(1, 53)]['var']; ?>";
}

</script>

以下是实际发生的情况:当我单击 image1 时，image2 将发生变化。但如果我再次单击 image1，什么也不会发生。 (与图2相同) 我希望每次单击图像时都会不断更改为另一个随机图像。

---编辑

数组结构:

INT id; (1-52)
CHARVAR var; (contains htmls)
INT abc1; 
INT abc2;
INT abc3;

数组上 print_r 的片段:

Array ( [1] => Array ( [0] => 1 [id] => 1 [1] => http://www.blahblah.com/2172.jpeg [var] => http://www.blahblah.com/2172.jpeg [2] => 0 [abc1] => 0 [3] => 0 [abc2] => 0 [4] => 0 [abc3] => 0 ) [2] => Array ( [0] => 2 [id] => 2 [1] => http://www.blahblah.com/2158.jpeg [var] => http://www.blahblah.com/2158.jpeg [2] => 0 [abc1] => 0 [3] => 0 [abc2] => 0 [4] => 0 [abc3] => 0 )

Answer 1

如果你检查你的源代码，你会发现在你的点击事件中，php 生成的图像 src 是一个字符串。无论您单击多少次，它都不会改变。

所以我建议print your php array to a javascript array ，并用javascript随机数进行管理。

一旦你的 javascript 代码中有可用的数组，只需使用 Math.random() :

var imageList; // Consider this your javascript array with the image urls generated by php

// This function returns a random number based on the list length
function getRndNum() {
    return Math.floor(Math.random() * (0 - imageList.length)) + imageList.length;
}

function changeImage1() {
    var image = document.getElementById('imgClickAndChange1');

    // Below we get a random number and use it as the key for the image list array
    image.src = imageList[getRndNum()];
}

Fiddle

打印你的 php 数组:

var $jsArray = "[";

foreach ($array as $key => $value) {
    $jsArray.= "'" . $value['var'] . "',";
}

echo "var imageList = " . substr($jsArray, 0, -1) . "];";

结果应该是这样的:

var imageList = ['http://www.blahblah.com/2172.jpeg', 'http://www.blahblah.com/2172.jpeg'];