使用 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'];

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

Making 'onClick' on php page using javascript switch to random url within a php array

html

javascript

onclick