时间戳

首页 > 解决方案 > 当php在while循环中显示按钮时使用js更改按钮的类

javascript - 当php在while循环中显示按钮时使用js更改按钮的类

问题描述

`<?php
$i = 0;
$testcount = 0;
while($testcount < 8) {
  if($i == 0) {
    ?>
    <input id="info" type="hidden" value="hi">
    <?php
  } else if ($ == 1) {
    ?>
    <input id="info" type="hidden" value="test">
    <?php
  }
  ?>
  <button onclick="test()" class="btnT">Hello</button>
  <?php
  $testcount++;
}
?>
<style>
  .test1 {
     background-color: cyan;
     color: black;
  }
</style>
<script type="text/javascript">
  function test () {
     $(".btnT").addClass("test1");
  }
</script>`

忽略if语句，我还没有实现到js

我正在使用 php while 循环显示按钮，没有任何文本或类。使用 php 的 if 语句确定一个类，其中它们将保存一个隐藏的输入值，然后将其推送到 javascript，然后根据隐藏输入的值添加一个类，然后我尝试删除并添加另一个类到 while 循环中仅显示一个单独的按钮。我要么得到第一个按钮来获得更改，要么更改所有按钮，而不是我单击的单个按钮。请帮忙，谢谢！

我最大的问题是如何让 while 循环中的每个按钮单独发生事件，而不是全部发生。我知道这是因为我有向按钮类添加类的代码，我尝试用 id 替换按钮类，但是这样，只有第一个按钮会添加新类，而不是其余按钮. 希望每个按钮都有一个解决方案，可以单独操作

标签： javascriptphphtmlcss

解决方案

当您创建 while 循环时，您可以将 $testcount 附加到按钮 ID 的末尾，这样每个按钮都有自己的唯一 ID，但仍然有一个可以在 javascript 中使用的“模板”名称。

<?php
$i = 0;
$testcount = 0;
while($testcount < 8) {
  echo '<button id="btn'.$testcount.'" onclick="test('.$testcount.')" class="btnT">Hello</button>';
  $testcount++;
}
?>

之后你应该得到 7 个 ID 为 btn1、btn2、btn3、btn4 等的按钮

然后在 Javascript 中，您可以运行基于每个按钮的函数，如下所示：

function test(x) {
    var myButton = document.getElementById('btn' + x);
    myButton.classList.add("test1");
    // Any more JS logic you have
}

例如，当您单击按钮 #2 时，该按钮的 ID 应为“btn2”。按钮的 onclick 会将数字“2”作为参数发送给 JS 函数。变量 myButton 将通过 btn 的 ID + 你给它的数字来获取元素，以创建一个像“btn2”这样的字符串，然后基于你现在知道按下了哪个按钮，你可以运行基于那个的动作. 使用您的示例，您将类“test1”添加到该按钮。

推荐阅读