Question

我目前正在建立一个股票市场模拟器，在我的主要股票市场菜单上，每个公司都有15个“购买”按钮。我使用以下代码生成了15个按钮和股票名称：

HTML和PHP：

for ($a = 0; $a < $length; $a++)
{
  echo "<tr>";
  echo "<td style = 'text-align:center;font-size:15pt'>" . $companyNames[$a] . "</td>";
  echo "<td style = 'text-align:center;font-size:15pt'>" . $companyTickers[$a] . "</td>";
  ?> <td style = "text-align:center;font-size:15pt" id = "<?php echo $priceIdentifiers[$a]; ?>"></td>
  <td style = "text-align:center;font-size:15pt" id = "<?php echo $lowPriceIdentifiers[$a]; ?>"></td>
  <td style = "text-align:center;font-size:15pt" id = "<?php echo $highPriceIdentifiers[$a]; ?>"></td>
  <td style = 'text-align:center;font-size:15pt'><button id = "<?php echo $a; ?>" onclick = "myFunction()" style = 'font-size:12pt'><strong>BUY</strong></button></td>
  <?php echo "</tr>";
}
  ?>

其中$ length = 15的值。我进一步使用Javascript创建了一个函数，试图显示使用以下代码为每个按钮（从$ a）生成的唯一ID：

Javascript：

<script>
var a = <? echo json_encode($a); ?>;
function myFunction(){
  window.alert(a);
}
</script>

当我使用上述代码按下按钮时，每次按下按钮都会增加每次显示给我的值（因此，按5次按钮，显示为“ 5”，对于8则显示为“ 8“）。

当查看另一篇文章的方法时：JavaScript - onClick to get the ID of the clicked button，我在文章中包含了一些代码并测试了结果，我单击了几个随机按钮，每次都打出“ 15”。

我的目标是使程序在按顶部按钮时显示“ 1”，在按第四个按钮时显示“ 4”，依此类推。我该怎么做才能解决此问题？

Answer 1

我不了解PHP，但是如果您更改了onclick事件以将$ a的值传递给JS函数怎么办？

<td style = 'text-align:center;font-size:15pt'><button id = "<?php echo $a; ?>" onclick = "myFunction('<?php echo $a; ?>')" style = 'font-size:12pt'><strong>BUY</strong></button></td>

然后在JS函数中将值作为参数

function myFunction(a){
  window.alert(a);
}

Answer 2

您确实应该使用jQuery之类的库来执行此类操作。使用onclick之类的属性是一种过时的处理方式。即使没有库使事情变得容易，正确地执行此操作仍然非常简单。

<?php for ($a = 0; $a < $length; $a++): ?>
    <tr>
        <td class="centered"><?=$companyNames[$a]?></td>
        <td class="centered"><?=$companyTickers[$a]?></td>
        <td class="centered" id="<?=$priceIdentifiers[$a]?>"></td>
        <td class="centered" id="<?=$lowPriceIdentifiers[$a]?>"></td>
        <td class="centered" id="<?=$highPriceIdentifiers[$a]?>"></td>
        <td class="centered">
            <button class="buybutton" data-identifier="<?=$a?>"><strong>BUY</strong></button>
        </td>
    </tr>
<?php endfor; ?>

请注意，我在for循环上使用了其他语法，并在集成PHP和HTML时使用了简短的echo标签，以保持整洁。

现在，您可以在脚本中使用类似这样的名称（{再次，使用库来帮助您更容易。）

buybutton

类名还为CSS提供了一个钩子，因此您不必一遍又一遍地重复内联样式规则。

这是一个生动的例子：

<script>
var buttons = document.getElementsByClassName("buybutton");
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", function(e) {
      // this reads the value of the data-identifier attribute
      var identifier = this.dataset.identifier;
      window.alert(identifier);
  }, false);
}
</script>

var buttons = document.getElementsByClassName("buybutton");
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", function(e) {
      var identifier = this.dataset.identifier;
      window.alert(identifier);
  }, false);
}

.buybutton { font-weight: bold; color: blue; }

使用PHP和Javascript显示生成的按钮的唯一ID

2 个答案: