javascript - 如何将 JavaScript 响应添加到多个 forearch 结果

Question

我目前有一个运行良好的 PHP 脚本，但在添加 JavaScript 时遇到了一个小问题。

我想要实现的是在运行良好的 php foreach 循环中显示结果，但我有一个 onclick JavaScript 函数，它应该在与 foreach 循环的结果相同的行中显示结果，但是相反它仅更改一个结果的当前值。

所以我目前有四种有价格的车型。选择一个后，我希望名称和价格显示在 [echo "Select:"的顶部。 $名称]行。

我目前的代码是这样的:

<?php
   $cars = array(
   array("Volvo",40.000),
   array("BMW",45.000),
   array("Saab",50.000),
   array("Land Rover",60.000)
   );

foreach($cars as $key){
    $name = $key[0];
    $price = $key[1];

    echo "<span id='$name'></span> <span id='$price'></span><br />";
    echo "Select: " . $name;
?>
 <script type="text/javascript">
     function grabData(d){
         document.getElementById("<?php echo $price; ?>").innerHTML = d.getAttribute("data-price");
         document.getElementById("<?php echo $name; ?>").innerHTML = d.getAttribute("data-title");
     }
 </script>
 <input onclick="grabData(this);" type="radio" name="rate" data-price="<?php echo $key[1]; ?>" data-title="<?php echo $key[0]; ?>"><br />
<?php
}
?>

因此，如果选择所有选项，最终结果应如下所示:

Volvo 40
Volvo: 
BMW 45
BMW:
Saab 50
Saab: 
Land Rover 60
Land Rover: 

非常感谢任何帮助或指导。谢谢!

Answer 1

循环只是一遍又一遍地定义相同的函数。当它被调用时，它将调用最后一个定义，而不是循环中该元素的定义。

您应该只定义一次函数，然后添加其他参数。然后您可以为每个元素使用不同的参数调用它。

<script type="text/javascript">
function grabData(d, priceid, nameid){
    document.getElementById(priceid).innerHTML = d.getAttribute("data-price");
    document.getElementById(nameid).innerHTML = d.getAttribute("data-title");
}
</script>

<?php
$cars = array(
              array("Volvo",40.000),
              array("BMW",45.000),
              array("Saab",50.000),
              array("Land Rover",60.000)
              );

foreach($cars as $key){
    $name = $key[0];
    $price = $key[1];

    echo "<span id='$name'></span> <span id='$price'></span><br />";
    echo "Select: " . $name;
    ?>
    <input onclick="grabData(this, '<?php echo $price; ?>', '<?php echo $name; ?>');" type="radio" name="rate" data-price="<?php echo $key[1]; ?>" data-title="<?php echo $key[0]; ?>"><br />
    <?php
}
?>