javascript - 更改 HTML 表中 td 元素的颜色，然后使用 AJAX 写入数据库

Question

我有一个从 MYSQl 数据库检索到的结果表，其中每个 TR 都有唯一的 ID 和类。当单击一行中的 TD 时，脚本会根据订单状态切换各种颜色，然后使用 AJAX 将每个切换写入回数据库。我遇到的问题是颜色更改了最后一个表行 td 而不是当前单击的行 td​​。我是 JS 和 Jquery 的菜鸟，并且读到问题可能是“提升”，这让我困惑了几天。非常感谢任何帮助。

<td id="<?php echo $row[ 'order_id' ]; ?>" class="<?php echo $row[ 'order_id' ]; ?> white"
    onclick="changeBackground(this.id)"><?php echo $row[ 'order_id' ]; ?></td>

<script>
  function getSelected() {
    return document.getElementsByClassName(<?php echo $row[ 'order_id' ]; ?>);
  }

  function changeBackground(id) {
    var all = getSelected();
    var x = id
    alert(x);
    for (var i = 0; i < all.length; i++) {
      var color = all[i].classList;
      
      if (color.contains("white")) {
        all[i].classList.add("red");
        all[i].classList.remove("white");
        $.ajax({
          type: "POST",
          url: 'update_color.php',
          data: {color: 2},
          success: function (data) {
            console.log(data);
          },
        });
        
      } else if (color.contains("red")) {
        all[i].classList.add("green");
        all[i].classList.remove("red");
        $.ajax({
          type: "POST",
          url: 'update_color.php',
          data: {color: 3},
          success: function (data) {
            console.log(data);
          },
        });

      } else if (color.contains("green")) {
        all[i].classList.add("pink");
        all[i].classList.remove("green");
        $.ajax({
          type: "POST",
          url: 'update_color.php',
          data: {color: 4},
          success: function (data) {
            console.log(data);
          },
        });
        
      } else if (color.contains("pink")) {
        all[i].classList.add("yellow");
        all[i].classList.remove("pink");
        $.ajax({
          type: "POST",
          url: 'update_color.php',
          data: {color: 5},
          success: function (data) {
            console.log(data);
          },
        });
        
      } else if (color.contains("yellow")) {
        all[i].classList.add("white");
        all[i].classList.remove("yellow");
        $.ajax({
          type: "POST",
          url: 'update_color.php',
          data: {color: 1},
          success: function (data) {
            console.log(data);
          },
        });
      }

    }
  }
</script>

Answer 1

如果您能够稍微修改 HTML 输出，我相信上面的 Javascript 可以得到显着简化，但我应该强调以下内容未经测试。 order_id 在分配给元素的类中似乎很奇怪 - 可能是一个整数，无论​​如何作为一个类都是无效的 - 也许如果将其分配为 dataset 属性，它会使得更有意义，如果需要，仍然可以在您的 javascript 代码中引用。将类简单地设置为您循环使用的各种颜色之一会有所帮助!

因此，也许可以像这样更改 HTML:

<td data-id="<?php echo $row['order_id'];?>" class="white">
    <?php echo $row['order_id'];?>
</td>

然后是 JavaScript

const matrix={
    'white':'red',
    'red':'green',
    'green':'pink',
    'pink':'yellow',
    'yellow':'white'
};

document.querySelectorAll('table td').forEach( td=>td.addEventListener('click',function(e){
    let id=this.dataset.id;
    let colour=this.className;
    let keys=Object.values( matrix );
    
    this.classList.remove( colour );
    this.classList.add( matrix[ colour ] );
    
    
    
    let fd=new FormData();
        fd.set('color', keys.indexOf( colour) );
        fd.set('id',id);
        
    fetch( 'update_color.php',{ method:'post',body:fd} )
        .then(r=>r.text())
        .then(text=>{
            console.log(text)
        })
}))