javascript - 如何显示值矩阵中的单个组合并隐藏其他组合

Question

编辑:我编辑了问题，因为最初的类是基于索引的，但在实际情况下它们不是..

假设我或多或少有这个标记

<div class="container">
    <div class="room_special">
         <div class="aaaa"></div>
         <div class="bbbb"></div>
         <div class="cccc"></div>
    </div>
    <div class="room_junior">
         <div class="xyz"></div>
         <div class="ztx"></div>
         <div class="tda"></div>
    </div>
    <div class="room3">
         <div class="xxxx"></div>
         <div class="board3"></div>
         <div class="zzzzz"></div>
    </div>
</div>

我想让 Room2 - Board 3 可见(其余的，隐藏的)，当用户点击某些元素(不是那些......)时，这可能会改变

我有两个变量，它们读取用户事件:

var room = 'room3';
var board = 'board3';

我目前正在这样做，但我认为/希望有一种更简单的方法，因为我有非常多的节点

function show(room,board) {
   $('.container div').fadeOut(); // hide the bothers
   $('.container div.'+room).fadeIn(); // show the one
   $('.container div .'+room+' div').fadeOut(); // hide the brothers
   $('.container div').find('.'+room+' .'+board).fadeIn(); // show the one
}

现在，这是可行的，但我可以使用我可能不知道的 jQuery 选择器或仅在一行 jQuery 中实现吗？

编辑2:
我可以看到我可以这样做，这是单行但实际上看起来更糟:

$('.container div').not('.'+room).hide().end().filter('.'+room).show().find('div').not('.'+board).hide().end().find('.'+board).show();

样本 fiddle

Answer 1

添加一些类会使它变得整洁，

<div class="container">
    <div class="room room1">
         <div class="board1"></div>
         <div class="board2"></div>
         <div class="board3"></div>
    </div>
    <div class="room room2">
         <div class="board1"></div>
         <div class="board2"></div>
         <div class="board3"></div>
    </div>
    <div class="room room3">
         <div class="board1"></div>
         <div class="board2"></div>
         <div class="board3"></div>
    </div>
</div>

var desiredRoom = 'some-Class-That-Represent-a-room'; //populate this from button click
var desiredBoard = 'some-Class-That-Represent-a-board'; //populate this from button click

function show(desiredRoom, desiredBoard) {
  //hide all boards
  $('.room div').fadeOut();
  //show the one
  $('.' + desiredRoom +' .'+desiredBoard).fadeIn()
}

如果我们可以从事件[可能来自下拉菜单]中获取指示哪个食宿的类，这就可以工作。