javascript - 错误做法 - 从 PHP while 循环为 getElementbyID 生成 javascript 代码

Question

我正在通过 PHP 从 mysql 查询创建一个 html 表。我用查询结果集中的一条记录填充每个表行。

我使用 javascript 函数 getElementById 来显示或关闭对话框。

因为我有很多行，所以我将 javascript 代码添加到 while 循环/表数据中。这会创建大量的 javacode，我非常确定这是不良做法的一个很好的例子。

如何在不为每一行生成(以编程方式)唯一的 javascript 函数的情况下执行此操作？数组是可行的方法吗？

这是我的代码

<?php while($r = mysqli_fetch_assoc($result)){  $current_row_number++; ?>
    <tr>
      <td>
    <!--Popup Window-->   
    <dialog id="window<?php echo $current_row_number; ?>">  
    <h3>Description</h3>  
    <p><?php echo $r['description']; ?></p>  
    <button id="exit<?php echo $current_row_number; ?>">Close</button>  
    </dialog>  
    <button id="show<?php echo $current_row_number; ?>">View</button> 
    <!--Popup Window-->   
     <script type="text/javascript">

    var dialog<?php echo $current_row_number; ?> = document.getElementById('window<?php echo $current_row_number; ?>');  
    document.getElementById('show<?php echo $current_row_number; ?>').onclick = function() {  dialog<?php echo $current_row_number; ?>.show();   };  
    document.getElementById('exit<?php echo $current_row_number; ?>').onclick = function() {  dialog<?php echo $current_row_number; ?>.close();  };  

     </script>
     </td>
    </tr>
<?php } ?>

生成此示例输出:

 <script type="text/javascript">

var dialog8 = document.getElementById('window8');  
document.getElementById('show8').onclick = function() {  dialog8.show();   };  
document.getElementById('exit8').onclick = function() {  dialog8.close();  };  
 </script>
 <script type="text/javascript">

var dialog9 = document.getElementById('window9');  
document.getElementById('show9').onclick = function() {  dialog9.show();   };  
document.getElementById('exit9').onclick = function() {  dialog9.close();  };  

 </script>
 <script type="text/javascript">

var dialog10 = document.getElementById('window10');  
document.getElementById('show10').onclick = function() {  dialog10.show();   };  
document.getElementById('exit10').onclick = function() {  dialog10.close();  };  

 </script>

等等……

我不需要一个完整的例子，但如果你能把我推向正确的方向，我会很高兴。我想摆脱那个 $current_row_number...

在代码中重复执行任务是不好的做法，java 脚本代码看起来很垃圾

提前致谢

Answer 1

是的，确实没有必要。

在事件处理程序中，this 指的是事件处理程序附加到的元素，事件对象的 target 属性告诉您事件从哪里开始。您可以使用此信息在表上设置一个处理程序来处理对这些按钮的点击。在按钮上放置一个类，指示它们是应该“显示”还是“隐藏”，然后执行如下操作(参见注释):

document.getElementById("the-table").addEventListener("click", function(e) {
    // Find the row
    var row = e.target;
    while (row.tagName != "TR") {
        if (row === this) {
            // The click wasn't on a row, ignore it
            return;
        }
        row = row.parentNode;
    }

    // Find the button
    var button = e.target;
    while (button.tagName != "BUTTON") {
        if (button === this) {
            // The click wasn't on a button, ignore it
            return;
        }
        button = button.parentNode;
    }

    // Find the dialog
    var dialog = row.querySelector("dialog");
    if (!dialog) {
        // Couldn't find it
        return;
    }

    // Now, use the `className` or `classList` on `button` to determine
    // whether to show or hide, and do that on `dialog`
}, false);

当然，您可以将其中的一些封装在实用函数中(或使用已有的库，如 jQuery)。

这是一个简化的示例，使用 h3 而不是 dialog:

document.getElementById("the-table").addEventListener("click", function(e) {
  // Find the row
  var row = e.target;
  while (row.tagName != "TR") {
    if (row === this) {
      // The click wasn't on a row, ignore it
      return;
    }
    row = row.parentNode;
  }

  // Find the button
  var button = e.target;
  while (button.tagName != "BUTTON") {
    if (button === this) {
      // The click wasn't on a button, ignore it
      return;
    }
    button = button.parentNode;
  }

  // Find the "dialog"
  var dialog = row.querySelector("h3");
  if (!dialog) {
    // Couldn't find it
    return;
  }

  // Now, use the `className` or `classList` on `button` to determine
  // whether to show or hide, and do that on `dialog`
  if (button.className == "show") {
    dialog.className = "";
  } else {
    dialog.className = "hidden";
  }
}, false);

.hidden {
  display: none;
}

<table id="the-table">
  <tbody>
    <tr>
      <td>
        <h3 class="hidden">Dialog 1</h3>
        <div>
          <button class="show">Show 1</button>
          <button class="hide">Hide 1</button>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <h3 class="hidden">Dialog 2</h3>
        <div>
          <button class="show">Show 2</button>
          <button class="hide">Hide 2</button>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <h3 class="hidden">Dialog 3</h3>
        <div>
          <button class="show">Show 3</button>
          <button class="hide">Hide 3</button>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <h3 class="hidden">Dialog 4</h3>
        <div>
          <button class="show">Show 4</button>
          <button class="hide">Hide 4</button>
        </div>
      </td>
    </tr>
  </tbody>
</table>