html 如何根据按钮的DB值改变按钮的颜色?[已关闭]

9udxz4iz  于 2023-02-14  发布在  其他
关注(0)|答案(2)|浏览(121)

已关闭。此问题需要超过focused。当前不接受答案。
**想要改进此问题吗?**更新此问题,使其仅关注editing this post的一个问题。

3天前关闭。
Improve this question
我有一个白色的HTML按钮,我希望当有人点击它时,它的颜色变成绿色,同时把一个db值从status = 0变成1,这样我就可以追踪到按钮的值,我还希望它也能反向,从绿色变成白色(1-〉0)。
我可以改变颜色,但它刷新了整个页面,这对我不好。

w8f9ii69

w8f9ii691#

首先创建css类如下

.button-red {
    background: red;
}

.button-white {
    background: white;
}

你能做的就是

$class_name = 'button-' . $db_value=='1' ? 'red' : 'white';

echo '<button class=". $class_name .">';
9lowa7mx

9lowa7mx2#

避免页面重载的最好方法是使用javascript AJAX ,这样按钮会刷新,然后也使用javascript更改按钮颜色。
使用jquery的示例:

<button id="btn1" onclick="toggleButton()" db-id="4" value="0">Click</button>
<script>
  function toggleButton(){
    let db = $("#btn1").attr("db-id"); // Useful for getting the database id stored in the attribute
    let value = $("#btn1").attr("value"); // Getting the attribute storing the current database value
    if(value == "0"){
       # Put Ajax Code here to update the database to 1 using db variable
       $("#btn1").attr("value","1"); // Change the value to 1
       $("#btn1").css("background-color","green"); // Changing the color
    }
    if(value == "1"){
       # Put Ajax Code here to update the database to 0 using db variable
       $("#btn1").attr("value","0"); // Change the value to 0
       $("#btn1").css("background-color","white"); // Changing the color
    }
  }
</script>

相关问题