如何在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>&nbsp;&nbsp;'); 
 
\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>&nbsp;&nbsp; </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>

來源

2016-09-29 Mani M

因此，我想確定我明白了......您想通過jquery語句從'btn-primary'更改爲'btn-success'嗎？ – Abela

是的，但condtion是booking_status ==「1」的意思是btn-danger，booking_status ==「0」的意思是btn-success –

請看我更新的答案，但仍然無法得到正確答案，按鈕顏色不變 –

這樣做的基本邏輯是這樣的，對於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邏輯，但這是更容易的部分。

來源

2016-09-29 04:33:11 Abela

你可以更新我的回答 –

的更清潔的方式，你可以把操作&&像這樣的例子

if (el.length && booking_status=="1") { 
    //your true statement 
    // append your button danger here 
} 
else { 
    // if booking status=="0" 
    // append your button primary 
}

這裏是DEMO讓你更瞭解我試圖解釋。

來源

2016-09-29 04:39:06 Fiido93

你可以更新我的回答 –

idk哪個變量調用預訂狀態。如果你能在這裏發帖子。 – Fiido93

請看我更新的答案，但仍然無法得到正確的答案，按鈕顏色不變 –

如何在jquery中顯示不同顏色的按鈕

回答

相關問題