Question

这里我做了所有正确的事情，在索引页面显示中返回数据后该值我需要再做一件额外的事情，这意味着返回数据 booking_status ==“1”意味着我想要显示红色按钮和按钮是不可点击的（class =“btn btn-primary）假设” booking_status ==“0”表示我想显示绿色按钮（class =“btn btn-primary”）。在 console.log（res）;我正是这样的

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();
	  $.ajax({
	     type: "POST",
		 url: "pg_details.php",
	     data: "sharing_id="+sharing,
		 success: function(data) {
		 var res =jQuery.parseJSON(data);
		 console.log(res);
			$.each(res.data, function(key, value) {
		var booking_status = value.booking_status;
		console.log(booking_status);//i am getting 1 here
		
		if(booking_status == "1"){
			 $("#book").removeClass("btn-success").addClass("btn-danger");
			 $("#book1").removeClass("btn-success").addClass("btn-danger");
			 el = $('[data-id='+value.pg_name +']');
			
			 if (el.length) 
			 {
				 // console.log(booking_status);
				
				 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;');
			  } 
			  else 
			  {
					//console.log(booking_status);
					 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>';
					$(".view_room").prepend(htmlString);
			  }
		}
		
		 
		});
			}
		  });
	
	}
</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){
	while($row=mysql_fetch_assoc($sql)){
		$row['pg_name'] = Getpgname($row['pg_id']);
		$data[]= $row;
	}
	$pg_type= array("return"=>1,"count" =>$count,"data" =>$data);
    echo $pg_type = json_encode($pg_type);
}else{
	$pg_type= array("return"=>0,"count" =>0,"data" =>"");
    echo $pg_type = json_encode($pg_type);
}
?>

<div class="view_room"></div>

Answer 1

这样的基本逻辑就是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逻辑，但这是更容易的部分。

Answer 2

您可以更清洁地将操作&&放在此示例中

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

以下DEMO让您更加了解我要解释的内容。

如何在jquery中显示不同的颜色按钮

2 个答案: