重新加载页面后在javascript函数中通过id更改div的颜色

Question

我正在使用引导程序以及 foreach 循环在 div 中从 mysql 打印数据。每个 div 都有一个“Ordered”按钮，它应该更改数据库中的一些数据，并更改特定 div 的背景颜色。我使用 onclick 函数将 div 的 id 发送到 url 并重新加载页面。当我尝试使用函数内的引导类更改 div 的颜色时，它只会闪烁片刻并使用以前的颜色重新加载页面。

谁能看出我做错了什么？

window.addEventListener("load", function(){
		  let params = new URLSearchParams(location.search);
		  if(params.get("num")) {
		      <?php	
				 $id = $_GET['num'];
				 $dbh = new PDO('mysql:host=...;dbname=...', '...', '...',[
					PDO::ATTR_DEFAULT_FETCH_MODE=>PDO::FETCH_ASSOC]);
					$stmt = $dbh->prepare('UPDATE orders SET status = 1 WHERE id = ?');
					$stmt->execute([$id]);
					$result = $stmt->fetchAll();
					?>
		      document.getElementById(num).style.backgroundColor = '#fcf3d4';

		      alert("after the page gets reloaded");
		  }
		});

		function change(num) {
		  var number = num;
		  alert("before page gets reloaded");
		  window.location.href = "http://ecohfood.com/login_success.php?num=" + number;
		}

<div class="col-6" id="<?php echo $v['id']; ?>">
  <div id="bottom">
    <button type="button" id="b<?php echo $v['id']; ?>" class="btn btn-success" onclick="document.getElementById('<?php echo $v['id']; ?>').style.backgroundColor = '#fcf3d4';
						change(<?php echo $v['id']; ?>);">Ordered</button>
    <button type="button" class="btn btn-danger" onclick="del(<?php echo $v['id']; ?>)">Delete</button>
  </div>

Answer 1

从根本上说，您无法以您想要做的方式做您想做的事。

一旦您重新加载/更改页面，您正在运行的上下文就完成了。 "window.location.href = ..." 之后的所有内容都不会执行 - 您已转到新页面。您无法从您已导航离开的页面影响该未来页面。

您可以做的是，当该页面加载时，更改颜色。将一个事件附加到页面的加载事件，检查您刚刚传递给页面的num 变量，如果它设置为您想要的，那么您可以更改颜色/连接数据库/任何东西。

所以新函数看起来像这样：

window.addEventListener("load", function(){
  // This will run every time the page loads, so let's check to make 
  // sure the variable is set.  Only if it has been set and the page 
  // has been reloaded, do we want to execute this color-change code

  // Get the parameters from the URL
  let params = new URLSearchParams(location.search);

  // Check that the one we want is truthy
  if(params.get("num")) {
      //connect with db and update information
      document.getElementById(num).style.backgroundColor = '#fcf3d4';

      alert("after the page gets reloaded");
  }
});

function change(num) {
  var number = num;
  alert("before page gets reloaded");
  window.location.href = "http://ecohfood.com/login_success.php?num=" + number;
}

Answer 2

在 window.location.href = "http://ecohfood.com/login_success.php?num=" + number; 之前进行 db 更新；

当更新成功时，在 Url 中添加一个新的参数，类似于

window.location.href = "http://ecohfood.com/login_success.php?num=" + number&update = 成功；

并将其添加到本页的js文件http://ecohfood.com/login_success.php

$(document).ready(function(){
	var aux = urlParam(update);
  if (aux!= ''){
    $("#id").css("Backgroud","#fffff")
  }

});

function urlParam(name){
	var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
	if (results==null){
		return null;
	}
	else{
		return results[1] || 0;
	}
}