html要素の内容に基づいてCSSスタイルを変更する

Question

bootstrap.boxで開発された複数のパネルボックスを含むデザインルームの割り当てページは、ベッドとして機能し、ベッドを占有した後、ヘッダーを赤く表示し、緑色を緑色に緑色にし、部屋アロケーション・ページ.IFは、私が行ってい渡された私はmulitiple idの負荷に同じ関数を呼び出したい//

function myFunc(id){ 
    if($(id).text()=="") 
     $(id).prev().parent().prev().css("background-color","green"); 
    else 
     $(id).prev().parent().prev().css("background-color","red"); 
} 

ので、どのように私は、開発を行う必要があり、それは部屋の退去ページを行く赤いパネル上のブートストラップを使用して任意のアイデアをクリックするとjQuery

onclickイベントではなく個別に

Answer 1

コードには多くの構文エラーと問題がありました。

ロード時にイベントをトリガーするには、jquery.trigger()〜.roombedクラスを使用できます。

チェック更新jsfiddle：

function myFunc(id) { 
 
    if ($("#" + id).text() == "") 
 
    $("#" + id).parent().css("background-color", "green"); 
 
    else 
 
    $("#" + id).parent().css("background-color", "red"); 
 
} 
 

 
$(".roombed").trigger("click");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-6"> 
 
    <div class="roombedboxB111" style="border:1px solid #FF2D55;width:333px;"> 
 
    <div class="roombedhead" style="background-color:green;height:5px;"> 
 

 
    </div> 
 

 
    <div class="roombed" style="background-color:white;height:116px;" onclick="myFunc('allocatedname1');"> 
 
     <label style="margin-left: 100px;">BR-111</label> 
 
     <br /> 
 
     <label id="allocatedname1">Jon Doe</label> 
 
     <br /> 
 
     <label id="allocatedyear">1st Year</label> 
 
     <br /> 
 
     <label id="allocatedyear">Computer</label> 
 
    </div> 
 

 

 
    </div> 
 
    <div class="roombedboxB111" style="border:1px solid #FF2D55;width:333px;"> 
 
    <div class="roombedhead" style="background-color:green;height:5px;"> 
 

 
    </div> 
 

 
    <div class="roombed" style="background-color:white;height:116px;" onclick="myFunc('allocatedname2');"> 
 
     <label style="margin-left: 100px;">BR-111</label> 
 
     <br /> 
 
     <label id="allocatedname2">Mark Doe</label> 
 
     <br /> 
 
     <label id="allocatedyear">1st Year</label> 
 
     <br /> 
 
     <label id="allocatedyear">Computer</label> 
 
    </div> 
 

 

 
    </div> 
 

 
</div>