如何在jquery中显示不同颜色的按钮
问题描述:
这里我做了所有正确的返回索引页面显示中的数据后,我需要额外做一件事什么是返回数据意味着什么booking_status ==“1” means我想显示红色的按钮和按钮是不可点击(class =“btn btn-primary)假设”booking_status ==“0”意味着我想显示绿色按钮(class =“btn btn-primary)”.in 执行console.log(RES);我收到这样如何在jquery中显示不同颜色的按钮
count:2
data:Array[2]
0:Object
1:Object
booking_status:"1"
id:"2"
pg_id:"1"
rent:"4000"
room_number:"Room 2"
room_sharing:"2"
----------
booking_status:"1"
id:"3"
pg_id:"1"
rent:"4000"
room_number:"Room 3"
room_sharing:"2"
<script>
function showDiv(toggle){
var sharing=$("#sharing").val();
\t $.ajax({
\t type: "POST",
\t \t url: "pg_details.php",
\t data: "sharing_id="+sharing,
\t \t success: function(data) {
\t \t var res =jQuery.parseJSON(data);
\t \t console.log(res);
\t \t \t $.each(res.data, function(key, value) {
\t \t var booking_status = value.booking_status;
\t \t console.log(booking_status);//i am getting 1 here
\t \t
\t \t if(booking_status == "1"){
\t \t \t $("#book").removeClass("btn-success").addClass("btn-danger");
\t \t \t $("#book1").removeClass("btn-success").addClass("btn-danger");
\t \t \t el = $('[data-id='+value.pg_name +']');
\t \t \t
\t \t \t if (el.length)
\t \t \t {
\t \t \t \t // console.log(booking_status);
\t \t \t \t
\t \t \t \t el.find('.btnmar').append(' <a href="register.php?roomid='+value.id +'&&pg_id='+value.pg_id+'&&amount='+value.room_rent+'&&room_number='+value.room_number+'&&advance='+value.advance_amount+'"><button type="button" class="btn btn-success" id="book" style=" width: 71px; ">'+value.room_number+'</button></a> ');
\t \t \t }
\t \t \t else
\t \t \t {
\t \t \t \t \t //console.log(booking_status);
\t \t \t \t \t var htmlString = '<div id="toggle" data-id="'+value.pg_name +'"> <div class="container" style=" margin-bottom: 30px;"><div class="row"><h4 style="margin-left:15px;">'+value.pg_name +'</h4><div class="col-sm-10"><div class="btn-group btnmar"><a href="register.php?roomid='+value.id +'&&pg_id='+value.pg_id+'&&amount='+value.room_rent+'&&room_number='+value.room_number+'&&advance='+value.advance_amount+'"><button type="button" class="btn btn-success" style=" width: 71px; id="book1"">'+value.room_number+'</button></a> </div></div><div class="col-sm-2"> <div class="panel-group"><div class="panel panel-primary"><div class="panel-heading"> Premium Facility</div><div class="panel-body" style=" padding-top: 5px; padding-bottom: 5px;"><i class="fa fa-television" aria-hidden="true" style="margin-right:15px;"></i>T.V.</div><div class="panel-body" style=" padding-top: 5px; padding-bottom: 5px;"><i class="fa fa-wifi" aria-hidden="true" style="margin-right:15px;"></i>Wifi</div><div class="panel-body" style=" padding-top: 5px; padding-bottom: 5px;"><i class="fa fa-bed" aria-hidden="true" style="margin-right:15px;"></i>Bed</div><div class="panel-body" style=" padding-top: 5px; padding-bottom: 5px;"><i class="fa fa-shopping-basket" aria-hidden="true" style="margin-right:15px;"></i>Washing Machine</div> </div> </div> </div></div></div></div>';
\t \t \t \t \t $(".view_room").prepend(htmlString);
\t \t \t }
\t \t }
\t \t
\t \t
\t \t });
\t \t \t }
\t \t });
\t
\t }
</script>
pg_details.php
<?php
include_once("admin/config.php");
include("functions.php");
$sharing=$_POST['sharing_id'];//Getting Sharing Value
$sql=mysql_query("SELECT * FROM rooms WHERE room_sharing='$sharing'");
$count = mysql_num_rows($sql);
if($count > 0){
\t while($row=mysql_fetch_assoc($sql)){
\t \t $row['pg_name'] = Getpgname($row['pg_id']);
\t \t $data[]= $row;
\t }
\t $pg_type= array("return"=>1,"count" =>$count,"data" =>$data);
echo $pg_type = json_encode($pg_type);
}else{
\t $pg_type= array("return"=>0,"count" =>0,"data" =>"");
echo $pg_type = json_encode($pg_type);
}
?>
<div class="view_room"></div>
答
这样做的基本逻辑是这样的,对于jquery
加bootstrap
:
$("#idFieldName").removeClass("btn-primary").addClass("btn-success");
这样做是:
这决定了id="fieldname"
$("#idFieldName")
这消除目前btn-primary
:
removeClass("btn-primary")
这增加了btn-success
:
removeClass("btn-success")
和两个时期之间基本上都是:“一直接下来的事情”之类的说法。
您将需要明确处理您的booking_status
的if/else逻辑,但这是更容易的部分。
+0
你可以更新我的回答 –
因此,我想确定我明白了......您想通过jquery语句从'btn-primary'更改为'btn-success'吗? – Abela
是的,但condtion是booking_status ==“1”的意思是btn-danger,booking_status ==“0”的意思是btn-success –
请看我更新的答案,但仍然无法得到正确答案,按钮颜色不变 –