Question

我的HTML设置如下。

<div id="A" class="square channels blue">A</div>
<div id="B" class="square channels blue">B</div>
<div id="C" class="square channels blue">C</div>

我想要做的是获取所选id的{{1}} ...就像这样：

class

现在我要做的是隐藏“频道”类的所有其他实例，但显示（即不隐藏）所选的那个。换句话说，隐藏类“通道”的所有实例，除了点击的那些实例。

这显然不起作用，但不确定如何做到这一点：

$('.channels').click(function() {
alert(this.id ) //This gets me the right `id`
});

Answer 1

您可以使用 .not 选择器：

$('.channels').on('click', function(e) {
    $('.channels').not(this).hide();
});

示例：

＆＃13;

$('.channels').on('click', function(e) {
  $('.channels').not(this).hide();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="A" class="square channels blue">A</div>
<div id="B" class="square channels blue">B</div>
<div id="C" class="square channels blue">C</div>

＆＃13;

Answer 2

我想这个

$("#" + this.id).show();

会奏效。

Answer 3

你可以这样做

$('.channels').click(function() {
    $('.channels').hide();
   $("#"+$(this).id).show();
    });

没有＃，它将不会使用id。

Answer 4

即使这个解决方案也可以使用

$('.channels').click(function() {
   $('.channels').hide();
   $(this).show();
});

隐藏除了单击的id之外的所有类的实例

4 个答案: