Question

设计房间分配页面，其中包含在bootstrap.boxes中开发的多个面板框作为床。如果床被占用，则突出显示标题为红色，否则为绿色，如果点击绿色面板则将其转到房间分配页面。如果点击红色面板它进入空间页面所以我应该如何使用bootstrap和JQuery开发任何想法

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

//我想在加载时使用mulitiple id调用相同的函数我完成onclick事件但是单独

Answer 1

代码中存在很多语法错误和问题。

您可以使用jquery.trigger()到.roombed类来加载事件。

检查更新的jsfiddle：https://jsfiddle.net/nashcheez/bzzmq9mw/1/

据我了解你的问题，这就是你想要的：

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>

根据html元素内容更改css样式

1 个答案: