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 文档。