Question

我想制作记忆游戏，但我不知道如何将数组的值从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);
}

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

Answer 1

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>

Answer 2

你做不到......

<?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 \'

将PHP数组传递给JS

2 个答案: