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，当用户点击某些元素（不是那些......）时，这可能会改变。

我有两个vars，它们阅读了用户事件：

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行中使用它吗？

EDIT2：

我可以看到我可以这样做，这是一条线，但实际上看起来更糟

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

示例fiddle

Answer 1

添加一些类会使它整洁，

language.name + ($last && language.checked ? '' : ',')

如果我们可以通过[从下拉列表中]获取指示哪些房间和房间的类，这可以有效。

Answer 2

我会将你的标记更改为：

 <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元素分配唯一的类。

$(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();

    });
});

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

2 个答案: