js怎麼實現點擊下面包房爲選中狀態（廳的名字顯示在上面，包房圖片變換加深），再次點擊某廳取消（廳的名字從上面取消，包房圖片變換爲原來未加深圖片）。
<html>
<head>
<title>zhong</title>
<style type="text/css">
#divName { height:100px; }
#divName label { display:inline-table; height:20px; line-height:20px; margin:0 5px; }
.divImgIn { width:100px; height:100px; background:blue; color:#000; }
.divImgOut { background:green; }
</style>
</head>
<body>
<div id="divName">
</div>
<div>
<div class="divImgIn" name="廣州">廣州</div>
<div class="divImgIn" name="上海">上海</div>
<div class="divImgIn" name="深圳">深圳</div>
</div>
</body>
</html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
// 爲 class = divImgIn 的控件綁定 click 事件
$(".divImgIn").click(function() {
// 使用 toggleClass ，如果 class 中沒有 divImgOut 則附加上，有則減掉
$(this).toggleClass("divImgOut");
// 獲得當前的 class ，要麼是 divImgIn ，要麼是 divImgIn divImgOut
var css = $(this).attr("class");
// 獲得點擊的房子的 name 屬性
var name = $(this).attr("name");
// 這個邏輯判斷根據你的需求寫
if (css != "divImgIn") {
// 這句是加上一個label
$("#divName").append($("<label name='" + name + "'>" + name + "</label>"));
} else {
// 這句是刪除 label 中 name = name 的
$("#divName").find("label[name='" + name + "']").remove();
}
})
})
</script>