Question

现在在我的页面中我设置了一个动态网格框，每个框中都有一个按钮..我的动机是onclick o按钮每个按钮执行不同的任务但在我的代码中每个按钮执行类似的任务。第二件事是我如何生成按钮的动态ID 现在我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"> 
 <title>Digital Menu</title>
  <meta name="description" content="">
 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <link rel="stylesheet" href="style.css">
 <link rel="stylesheet" href="style1.css"> 

   <title>Page Title</title>
  </head>
  <body>

<div class="banner">
  <div class="header">
<div class="header-inner container clear">
 <a class="logo" href="#"><span class="sr">Lambda Logo</span></a>     
  <div class="navigation">
    <ul class="navigation-menu">         
      <li class="navigation-item"><a href="new_orders.php">New Orders</a>
   </li>
      <li class="navigation-item"><a href="#open_orders">Open Orders</a>
    </li>
        <li class="navigation-item"><a href="#complete_orders">Complete
    Orders</a></li>         
    </ul>            
  </div>
  <ul>
    <h1>open orders</h1>
    </ul>       
</div>
</div>


 <?php

  include("connect.php");
   $query="SELECT * FROM `orders`";
   $filter_Result=mysqli_query($con,$query);
  while($row = mysqli_fetch_array($filter_Result)){




        echo "<div class='block'>";

      echo "<div class='boxed'>";

 echo "<div id='container'>";


   echo "<td>" . $row['id'] . "</td>" ."<br>"; 
  echo "<td>" . $row['status'] . "</td>"."<br>";
   echo "<td>" . $row['created_date'] . "</td>"."<br>";
   echo "<td>" . $row['uid'] . "</td>"."<br>"."<br>"."<br>"."<br>";
  echo "<button class='button' style='vertical-align:middle' id='demo'
    onclick='myFunction()'><span>click Me</span>";
 echo "</button>";



 echo "</div>";


      echo "</div>";

    echo "</div>";


  }

      ?>


   <script type="text/javascript">
  function myFunction() {
     document.getElementById('demo').innerHTML = 'Hello World';
     }
  </script>


  </div>
  </body>
  </html>

Answer 1

您应该使用您的ID和函数参数传递唯一值。请参阅此代码。这将为每个按钮设置唯一ID，并在功能中将该唯一ID作为参数。因此，该函数将显示带有ID的消息“ Hello World ”。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8"> 
   <title>Digital Menu</title>
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
   <link rel="stylesheet" href="style.css">
   <link rel="stylesheet" href="style1.css"> 
   <title>Page Title</title>
</head>
<body>
<div class="banner">
  <div class="header">
    <div class="header-inner container clear">
      <a class="logo" href="#"><span class="sr">Lambda Logo</span></a>     
        <div class="navigation">
          <ul class="navigation-menu">         
             <li class="navigation-item"><a href="new_orders.php">New Orders</a></li>
             <li class="navigation-item"><a href="#open_orders">Open Orders</a></li>
             <li class="navigation-item"><a href="#complete_orders">Complete Orders</a></li>         
          </ul>            
        </div>
        <ul><h1>open orders</h1></ul>       
     </div>
  </div>
 <?php
  include("connect.php");
  $query="SELECT * FROM `orders`";
  $filter_Result=mysqli_query($con,$query);
  $div = '';

  while($row = mysqli_fetch_array($filter_Result)){
      $div .= "<div class='block'><div class='boxed'><div id='container'>";
      $div .= "<td>" . $row['id'] . "</td>" ."<br>"; 
      $div .= "<td>" . $row['status'] . "</td>"."<br>";
      $div .= "<td>" . $row['created_date'] . "</td>"."<br>";
      $div .= "<td>" . $row['uid'] . "</td>"."<br>"."<br>"."<br>"."<br>";
      $div .= "<button class='button' style='vertical-align:middle' id='demo" . $row['id'] . "' onclick='myFunction(\"" . $row['id'] . "\")'><span>click Me</span>";
      $div .= "</button></div></div></div>";
  }

  echo $div;
 ?>
<script type="text/javascript">
   function myFunction(id) {
     document.getElementById('demo').innerHTML = 'Hello World' + id;
   }
</script>
</div>
</body>
</html>

现在，如果您想对每个按钮执行不同的操作，则可以使用函数中的 if 或 switch 条件编写相应的操作。

例如：

function myFunction(id) {
  if( id == 1 ) {
    document.getElementById('demo').innerHTML = 'First Button clicked';
  } else if( id == 1 ) {
    document.getElementById('demo').innerHTML = 'Second Button clicked';
  }
}

在按钮上单击按钮执行不同的任务（HTML）

1 个答案: