将PHP数组传递给JS [重复]答案

【问题标题】：Pass PHP array into JS [duplicate]将PHP数组传递给JS [重复]
【发布时间】：2015-10-24 00:02:47
【问题描述】：

我想做一个记忆游戏，但我不知道如何将数组的值从 PHP 传递到 JS。

我需要将一些数字传递给 JS 变量，但仅在用户单击时获取表格的第一个数字。

数字已经存在于 PHP 数组中，但我需要传递在 JS 变量中单击的数字

PHP 代码（随机获取数字）：

$numbers = range(0, 9);
shuffle($numbers);

HTML 和 PHP 代码（表格）：

<table width="200" border="1" id="tabla" style="visibility:visible" >
<tr>
<?php foreach($numbers as $key){ ?>
<td ><a href="#" onclick="validacion()" style="color:#000; text- decoration:none;"> <div class="container"> <h1 class="box" id="text"> <?php  echo $key; ?> </h1> </div> </a></td>
<?php } ?>
</tr>
</table>

JS 代码（我可以只获取表格中的第一个数字吗？）

function validacion(){
var text=document.getElementById('text').innerHTML;
alert(text);
}

当我点击表格的任何数字时，我会得到相同的第一个数字。我该如何解决这个问题？

【问题讨论】：

标签： javascript php arrays

【解决方案1】：

你不能这样做..

<?php foreach($numbers as $key){ ?>
<td ><a href="#" onclick="validacion()" style="color:#000; text- decoration:none;"> <div class="container"> <h1 class="box" id="text"> <?php  echo $key; ?> </h1> </div> </a></td>
<?php } ?>

改为

<?php foreach($numbers as $key){
 echo '<td ><a href="#" onc...';
}?>

另一件事，

function validacion(id){
var text=document.getElementById('text'+id).innerHTML;
alert(text);
}

并将 ID 添加到 foreach 循环中的 ID 中：id=\'"text"+id\'

【讨论】：

【解决方案2】：

ID 必须是唯一的，您不能在表格的每一行都有id="text"。 document.getElementById("text") 将始终返回具有该 ID 的第一个元素，而不是用户单击的行中的元素。

请改用class="text"。然后更改您的函数以在当前元素中查找具有该类的元素。 HTML 需要将元素传递给验证函数：

<a href="#" onclick="validacion(this)" style="color:#000; text- decoration:none;">

那么 JS 将是：

function validacion(elem) {
    var text = elem.getElementsByClassName("text")[0].innerHTML;
    alert(text);
}

另请注意，将DIV 放入A 在 HTML 4.01 中无效。见Is putting a div inside an anchor ever correct?

这是完整的代码：

function validacion(elem) {
  var text = elem.getElementsByClassName("text")[0].innerHTML;
  document.getElementById("alert").innerHTML = text;
}

<table>
  <tr>
    <td>
      <a href="#" onclick="validacion(this)" style="color:#000; text- decoration:none;">
        <div class="container">
          <h1 class="box text" > 1 </h1> 
        </div>
      </a>
    </td>
  </tr>
  <tr>
    <td>
      <a href="#" onclick="validacion(this)" style="color:#000; text- decoration:none;">
        <div class="container">
          <h1 class="box text" > 2 </h1> 
        </div>
      </a>
    </td>
  </tr>
  <tr>
    <td>
      <a href="#" onclick="validacion(this)" style="color:#000; text- decoration:none;">
        <div class="container">
          <h1 class="box text" > 3 </h1> 
        </div>
      </a>
    </td>
  </tr>
</table>
Alert here:
<div id="alert"><div>

【讨论】：

感谢回复，但此函数 getElementsByClassName 不存在
它适用于我，我添加了一个工作示例。