时间戳

首页 > 解决方案 > 在 ajax 上使用 mysql 上的条件值设置背景颜色

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

问题描述

我只想在 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.
        }
    });
});

});

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

标签： javascriptmysqlajax

解决方案

您可以使用.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;
}

推荐阅读