javascript - 我想更改按钮颜色和 onclick 文本，并且刷新页面时不应更改

Question

我想在单击时更改按钮颜色和文本，刷新页面时它不应该更改。在这里，当单击设置状态时，它会将文本更改为已确认，并且颜色更改为绿色，当我再次单击它时，它将颜色更改为红色，文本更改为待处理。现在，当我再次单击它时，它应该将颜色更改为绿色，文本应更改为已确认，这里颜色和文本都不会更改。这应该在页面时保留被刷新了。这是代码:

<input type="submit" id="<?php echo $orderQuery['id'];?>" value="set status" onclick="setColor('<?php echo $orderQuery['id'];?>')"; />
<script>

var count = 1;

function setColor(btn) {
var property = document.getElementById(btn);

if (count == 0) {property.style.backgroundColor = "#ff0000"
 if (property.value=="confirmed") property.value = "pending";
 }
 else {property.style.backgroundColor = "#7FFF00"
 count = 0;
if (property.value=="set status") property.value = "confirmed";
}

    }
</script>

Answer 1

HTTP 是无状态协议(protocol)我们无法维护 HTTP 调用之间的状态了解更多信息look at this answer

因此，您必须通过其他机制(如查询字符串、Cookie 或 session )保存下次需要的数据(在您的情况下按钮颜色)

查询字符串

你可以使用查询字符串来携带你想要保留的信息喜欢

www.example.com?btnColor=blue

当然，在页面加载时，您可以使用 php 设置颜色，如下所示。

//pseudo code
if(isset($_GET['btnColor']) // for query string
 echo  '<button style="background:'.$_GET['btnColor'].'">'
if(isset($_COOKIE['btnColor']) // for cookie
 echo  '<button style="background:'.$_COOKIE['btnColor'].'">'
if(isset($_SESSION['btnColor']) // for Session based storage
 echo  '<button style="background:'.$_SESSION['btnColor'].'">'

COOKIE 和 session

您还可以使用cookies来保存您的btn颜色

setcookie("color", "red", time() + (86400 * 30), "/"); // 86400 = 1 day
// and you can retrieve the cookie value from


 echo $_COOKIE['color'] // prints red

session 可以通过以下方式使用

//to set the session
$_SESSION['color'] = "red";
// to retrive the data
echo $_SESSION['color'];

Cookie 和 session 的主要优点是它们会在一段时间内保存信息有关更多信息和详细信息，请查看 php.net 文档。