Javascript 动态更改特定div的颜色

我想相应地更改

divs

颜色，如果可能的话，这就是我到目前为止所做的：

我的数据库：形状

id is_success
id1      0
id2      1
id3      0
id4      1

<div class="container" style="background: black; width: 500px; height: 500px;">
    
    <div style ="id="id1" width: 35%;  height: 14%; margin:20%"> div1 </div>
    <div style ="id="id1" width: 35%;  height: 14%; margin:80%"> div2 </div>
    <div style ="id="id1" width: 35%;  height: 14%; margin:10%"> div3 </div>
    <div style ="id="id1" width: 35%;  height: 14%; margin:60%"> div4 </div>
    
</div>

 <?php
     $sql = "SELECT * FROM shape ";
       
       if ($result->num_rows > 0)
        {
           while($row = $result->fetch_assoc())
           {
              $id = $row['id'];
              $is_success = $row['is_success'];
              if ($is_success == 1)
              {
                  //change the divs background color to green
              }else {
                    //change the divs background color to red
              }
           }
       }
   
   

id是否成功
ID10
ID21
ID30
id4 1
第一组
第二组
第三组
第四组

第一组
第二组
第三组
第四组

第一组
第二组
第三组
第四组
是的，这是可能的

while($row = $result->fetch_assoc())
       {
          $id = $row['id'];
          $is_success = $row['is_success'];
          $background = "background: red;";
          if ($is_success == 1)
          {
              $background = "background: green;";
          }
          ?>
          <div id="id1" width: 35%;  height: 14%; style="<?php echo $background ?>"> div1 </div>
          <?php
       }

while（$row=$result->fetch_assoc（））
{
$id=$row['id']；
$is_success=$row['is_success']；
$background=“background:red；”；
如果（$is_success==1）
{
$background=“background:green；”；
}
?>
是的，这是可能的

while($row = $result->fetch_assoc())
       {
          $id = $row['id'];
          $is_success = $row['is_success'];
          $background = "background: red;";
          if ($is_success == 1)
          {
              $background = "background: green;";
          }
          ?>
          <div id="id1" width: 35%;  height: 14%; style="<?php echo $background ?>"> div1 </div>
          <?php
       }

while（$row=$result->fetch_assoc（））
{
$id=$row['id']；
$is_success=$row['is_success']；
$background=“background:red；”；
如果（$is_success==1）
{
$background=“background:green；”；
}
?>
使用背景色将动态id解析为相应的div

$id = $row['id'];
$is_success = $row['is_success'];
if ($is_success == 1)
{
      // IF div id's and database id's are same try this line
      ?><script>$("#<?php echo $id;?>").css("background","green");</script><?php
      // Create new div with color dynamically try this line
      echo "<div id='".$id."' style='background:green;width: 35%;height: 14%; '> ".$id." </div>";
}else {
      ?><script>$("#<?php echo $id;?>").css("background","red");</script><?php
      // Create new div with color dynamically try this line
      echo "<div id='".$id."' style='background:red;width: 35%;height: 14%; '> ".$id." </div>";
}

$id=$row['id']；
$is_success=$row['is_success']；
如果（$is_success==1）
{
//如果div id和数据库id相同，请尝试此行
css（“背景”、“绿色”）；使用背景色将动态id解析为相应的div

$id = $row['id'];
$is_success = $row['is_success'];
if ($is_success == 1)
{
      // IF div id's and database id's are same try this line
      ?><script>$("#<?php echo $id;?>").css("background","green");</script><?php
      // Create new div with color dynamically try this line
      echo "<div id='".$id."' style='background:green;width: 35%;height: 14%; '> ".$id." </div>";
}else {
      ?><script>$("#<?php echo $id;?>").css("background","red");</script><?php
      // Create new div with color dynamically try this line
      echo "<div id='".$id."' style='background:red;width: 35%;height: 14%; '> ".$id." </div>";
}

$id=$row['id']；
$is_success=$row['is_success']；
如果（$is_success==1）
{
//如果div id和数据库id相同，请尝试此行
？>$（“#”）css（“背景”、“绿色”）；捷径：

       while($row = $result->fetch_assoc()){
        echo '<div id="id'.$row['id'].'" style="background-color: '.($row['is_success'] ? 'green' : 'red').';">div #'.$row['id'].'</div>';
       }

while（$row=$result->fetch_assoc（））{
回显'div#'。$row['id'.'；
}

您可以在此处通过写入（条件？true:false）来缩短If/Else。
短路径：

       while($row = $result->fetch_assoc()){
        echo '<div id="id'.$row['id'].'" style="background-color: '.($row['is_success'] ? 'green' : 'red').';">div #'.$row['id'].'</div>';
       }

while（$row=$result->fetch_assoc（））{
回显'div#'。$row['id'.'；
}

您可以在此处通过以下方式缩短If/Else（条件？true:false）（
我真的不知道SQL是怎么做的，但是你可以只获取elementById并将样式背景设置为你想要的颜色（将HTML输出到while循环：）你的HTML无效。你不能将
宽度：35%；
或
高度：14%；
作为HTML属性。它们必须在
stryle=“”中
attribute.php无法操作客户端html。您可以使用js（任何js库）或者在每次发生更改时向服务器发出请求，并返回带有新值的经过处理的html只要将div放入循环中并根据您想要的样式设置一个类。我真的不知道SQL是如何做的，但您可以只获取elementById并将样式背景设置为您想要的颜色将html输出到while循环：）Y我们的HTML无效。您不能将
宽度：35%；
或
高度：14%；
作为HTML属性。它们必须位于
stryle=”“
属性内。php不能操作客户端HTML。您可以使用js（任何js库）或者在每次发生更改时向服务器发出请求，并返回带有新值的经过处理的html只要将div放入循环中并根据您想要的样式设置一个类。但是我可以通过某种方式使其动态化，或者可以每5分钟刷新一次类
容器
seconds@droidfiji你可以。你可以创建一个AJAX请求每5秒访问一次服务器，获取值，然后使用jQuery更改容器的值。看看这个。另外，还需要一个JavaScript的
setInterval（）
method。但是我可以让它动态一些吗？或者我可以每5分钟刷新一次类
容器seconds@droidfiji可以。您可以每5秒向服务器创建一个AJAX请求，获取值，然后使用jQuery更改容器的值。看看这个。您还需要一个JavaScript的
setInterval（）
方法。这对我来说很有效，但在动态中可以实现您的id是动态的
，如果您的颜色也是动态的
，考虑到OP对所有div都具有相同的id（或者，由于它们被包含在样式标记中，所以当前根本没有任何id）这本身不起作用。div和db-results之间没有联系。这对我来说是有效的，但在动态中可以实现。考虑到OP对所有div都具有相同的id，您的id是动态的
，如果您的颜色也是动态的
，（或者目前根本没有任何id，因为它们包含在样式标记中）这本身不起作用。DIV和db-results之间没有连接。Hi droid，你的是动态的，你可以在html中看到。没有必要写两次回显。Hi Bernard，为什么不需要回显？有if条件，并且有不同的背景色。请检查它。是的，但是如果你设置变量i就足够了n If/Else并在后面输出行
id=''id.$id.'
=语法错误。将其更改为：
id='id'{$id}“
Hi droid，您的是动态的，您可以在html中看到。无需编写两次回显。Hi Bernard，为什么不需要回显？有if条件，并且有不同的背景颜色。请检查它。是的，但是如果您在if/Else中设置变量，并在
id=”之后输出该行就足够了“
=语法错误。将其更改为：
id='id{$id}”“
如果没有Else条件，它将在第一次满足条件后保持绿色。没有它的循环，因此每次它都会先保持红色，如果条件为真，则只会存储绿色。是的，因此，如果我们添加if和Else，则这类需求将需要更多的时间来执行，因此我认为这很好。：）如果没有Else条件，它将在第一次满足条件后保持绿色。没有its循环，因此每次它都将首先保持红色，如果条件为真，则仅存储绿色。是的，因此如果我们添加if和Else，则这种类型的要求将需要更多的时间