在 ajax 上使用 mysql 上的条件值设置背景颜色

Posted 2023-02-19

【中文标题】在 ajax 上使用 mysql 上的条件值设置背景颜色

【英文标题】：set background color on ajax with condition value on mysql

【发布时间】：2021-03-11 23:51:24

【问题描述】：

我只想在 mysql 数据中显示 2 种颜色的按钮和状态状态 如果状态 = 1 ，按钮颜色 = 绿色 如果状态 = 2 ，按钮颜色 = 红色

这是我的按钮代码

<?php
           $query1 = mysqli_query($connect,"SELECT * FROM smt WHERE no <= 15");
           while ( $data=mysqli_fetch_array($query1))
              $nostation = $data['no'];
              $namastation = $data['name'];
              $status = $data['status'];
               ?>

                      <div class='col-xs-2-2'>
                          <form method='post'>
                            <input type="hidden" value="2" id="status_<?=$nostation;?>" name="status">
                             <button type="submit" id="button_<?=$nostation;?>" data-id="<?=$nostation;?>" style="width:140px; height:75px; margin : 2px; border-radius:10%;"><b style="font-size:15px; color: #fff; font-family:Calibri;"><?php echo $namastation ?></b></button>
                          </form>
                      </div>
              <?php  ?>

这是我的 js 颜色代码，现在我可以为所有按钮设置颜色，没有状态值的条件。任何人都可以帮助我吗？

<script type="text/javascript">
  $(document).ready(function()
   $("[id^=button_]").css("background-color", "Red");
 );
</script>

这是我的 ajax 代码，用于设置具有自动生成 ID 的多个按钮

<script>
$(document).ready(function()           //when DOM is Ready.
$("[id^=button_]").click(function ()   //when Button is Clicked.
    var id = $(this).data('id');       // Get the ID of the button that was clicked on.
    var status = $("#status_"+id).val();   // value from `input` which is connected the clicked button.
   // console.log(id+"---"+name);
    $.ajax(                          // AJAX request
        url: 'coba1.php',            // send request to server.
        method: 'POST',               // method is POST.
        data:                        //data which is sent to server.      
            id: id,status: status
        ,
        function (data)     //success function called.
          // alert success data.
        
    );
);

);

我如何添加代码以根据条件设置按钮颜色？

【问题讨论】：

您正在将所有以button_ 开头的按钮ID 设置为红色，您期望什么？使用.each 循环遍历您的集合并相应地设置颜色......或者更好的是，已经在 CSS 的外部样式表上分配了 CSS。

@StackSlave 是的，我设置了 id，因为它有多个按钮，我必须将按钮 id 设置为使用 while 函数自动递增。我尝试使用 php-css 使用 if 条件设置颜色，但它只需刷新页面即可工作..

@akutok 我看到一个紧密的卷曲布鲁斯“”你想在这里实现什么？？

为什么刷新页面会起作用？我没有看到任何 $_POST、$_GET 或 $_SESSION 变量。在将任何内容发送到浏览器之前，您需要知道 PHP 在服务器上执行。当页面加载时，服务器和浏览器代码都会重新执行。请记住这一点并学习使用XMLHttpRequest。

对不起我在其他文件中的 $_POST .. 那是向数据库发布一个值，其中表 id (nostation) 与 id="button_=$nostation;?>" 相同.. 它的工作使用 ajax 无需刷新页面，只需单击按钮即可..

【参考方案1】：

您可以使用.each 循环遍历您的表单，然后检查status 输入是否具有值1 或2，这取决于addClass red 或green。此外，在此处添加您从 db 获得的状态值，即：<input type="hidden" value="<?=$status;?>" id="status_<?=$nostation;?>" name="status"> `

演示代码：

//loop through each form
$("form").each(function() 
  //find status value if 2 add class red or green
  $(this).find("input[name=status]").val() == 2 ? $(this).find("[id^=button_]").addClass("red") : $(this).find("[id^=button_]").addClass("green")
)

.red 
  background-color: red;


.green 
  background-color: green;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='col-xs-2-2'>
  <form method='post'>
    <input type="hidden" value="2" id="status_1" name="status">
    <button type="submit" id="button_1" data-id="1" style="width:140px; height:75px; margin : 2px; border-radius:10%;"><b style="font-size:15px; color: #fff; font-family:Calibri;">Abc</b></button>
  </form>
</div>
<div class='col-xs-2-2'>
  <form method='post'>
    <input type="hidden" value="1" id="status_2" name="status">
    <button type="submit" id="button_2" data-id="2" style="width:140px; height:75px; margin : 2px; border-radius:10%;"><b style="font-size:15px; color: #fff; font-family:Calibri;">Xyz</b></button>
  </form>
</div>
<div class='col-xs-2-2'>
  <form method='post'>
    <input type="hidden" value="2" id="status_3" name="status">
    <button type="submit" id="button_3" data-id="3" style="width:140px; height:75px; margin : 2px; border-radius:10%;"><b style="font-size:15px; color: #fff; font-family:Calibri;">Mno</b></button>
  </form>
</div>

此外，您可以使用 php 代码执行相同操作，只需检查 $status 值并将值 red 或 green 分配给某个变量，然后将此变量添加到按钮 class 即：

<?php
//yourcodes ..
$toadd;
while ($data = mysqli_fetch_array($query1)) 
    $nostation = $data['no'];
    $namastation = $data['name'];
    $status = $data['status'];
    //check status
    if ($status == 2) 
        $toadd = "red"; //assign value
        
     else 
        $toadd = "green";
    
?>

          <div class='col-xs-2-2'>
             <form method='post'>
                <input type="hidden" value="2" id="status_<?=$nostation; ?>" name="status">
                //pass same value inside button class
               <button type="submit" class="<?=$toadd; ?>" id="button_<?=$nostation; ?>" data-id="<?=$nostation; ?>" style="width:140px; height:75px; margin : 2px; border-radius:10%;"><b style="font-size:15px; color: #fff; font-family:Calibri;"><?php echo $namastation; ?></b></button>
            </form>
          </div>
 <?php
 ?>

并且只需使用 css ：

 .red 
  background-color: red;


.green 
  background-color: green;
 

【讨论】：

什么不起作用？你有什么错误吗？请详细说明