Question

我想相应地动态更改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
              }
           }
       }

这是最终结果应如下所示：

因此，当数据库中的值发生变化时，应该设置div的背景颜色 已更新：请注意，每个div位于html页面上的不同位置

Answer 1

<div class="container" style="background: black; width: 500px; height: 500px;">
    <div style ="id="id1" width: 35%;  height: 14%;"> div1 </div>
    <div style ="id="id1" width: 35%;  height: 14%;"> div2 </div>
    <div style ="id="id1" width: 35%;  height: 14%;"> div3 </div>
    <div style ="id="id1" width: 35%;  height: 14%;"> 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)
          {
              echo "<script>$('#id$id').css('color', 'green')</script>";
          }else {
              echo "<script>$('#id$id').css('color', 'red')</script>";
          }
       }
   }

或者你根本不必使用jQuery或JavaScript。简单地将HTML放在循环中。

<div class="container" style="background: black; width: 500px; height: 500px;">
 <?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)
              {
                  echo "<div id=\"id$id\" style=\"width: 35%;  height: 14%; color: green\"> div$id </div>";
              }else {
                  echo "<div id=\"id$id\" style=\"width: 35%;  height: 14%; color: red\"> div$id </div>";
              }
           }
       }
?>
</div>

Answer 2

是的，这是可能的。

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
       }

Answer 3

将动态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>";
}

Answer 4

短道：

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

您可以通过写（条件？true：false）缩短If / Else。

动态更改特定div的颜色

5 个答案: