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

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';

我目前是这样做的，但是我think/hope有一个更简单的方法，因为我有非常多的节点

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

您可以向显示的节点添加 selected class 并通过 css 或仅在 selected class 上完成所有转换JQuery

JQuery

$('.selected').removeClass('selected');
$('.container div.'+room).addClass('selected')
$('.container div.' +room+ '.' +board).addClass('selected')

CSS（这可能需要调整，但它与您最终会得到的类似）

.selected {
   -webkit-transition: opacity 2.0s ease-in;
   -moz-transition: opacity 2.0s ease-in;
   -o-transition: opacity 2.0s ease-in;
   opacity: 1;
}

如果您想使用 jquery

进行转换

$('.selected').fadeOut();
$('.selected').removeClass('selected');
$('.container div.'+room).addClass('selected');
$('.container div.' +room+ '.' +board).addClass('selected');
$('.selected').fadeIn();

Answer 2

加点class会更整洁，

<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()
}

如果我们可以classes 指示事件中的食宿[可能来自下拉列表]，这可以工作。

Answer 3

我会将您的标记更改为：

 <div class="container">
    <div class="room">
        <div class="board"></div>
        <div class="board"></div>
        <div class="board"></div>
    </div>
    <div class="room">
        <div class="board"></div>
        <div class="board"></div>
        <div class="board"></div>
    </div>
    <div class="room">
        <div class="board"></div>
        <div class="board"></div>
        <div class="board"></div>
   </div>
</div>

我会以不同的方式处理这个问题。这消除了为每个 room 和 board 元素分配唯一 class 的需要。

$(function() {
    $(.board).click(function() {

        // hide all the rooms except the one that
        // contains the board the user clicked
        $(.room).not($(this).parent()).fadeOut();

        // hide all the boards except the one
        // that was clicked by the user
        $(.board).not($(this)).fadeOut();

    });
});

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

How to show a single combination from matrix of values and hide others

javascript

jquery

jquery-selectors