Question

我正在研究jQuery中的'OnClick'功能。当我们点击父Div属性时，只显示父div及其子div，其他div应该淡出。

请找到以下代码。 HTML：

<div>1</div>
<div class="ree">2</div>
<div class="foo">items
  <div class = "bar">Shoes
     <div class="nike">3</div>
     <div class="puma">5</div>
     <div class="gap">5</div>
  </div>
</div>
<div>4</div>

jQuery的：

$('.foo').on('click',function ()
              {
$('div:not(.foo)').css('opacity','0.2')

              });

这里当我点击Div Class'foo'时，除了'foo'和它的子div如bar，nike，puma之外，应该显示gap div类，所有其他Div类应该淡出。

请在下面找到演示

http://jsfiddle.net/6V8hr/15/

全部谢谢

Answer 1

.siblings()

$('.foo').on('click', function () {
    $(this).siblings('div').css('opacity','0.2');
});

Example

Answer 2

您的:not选择器也需要排除子div。您可以像其他任何东西一样在非选择器中放置多个东西：

$('.foo').on('click', function(){
  $('div:not(.foo, .foo div)').css('opacity','0.2');
});

更新了JSFiddle：http://jsfiddle.net/6V8hr/17/

Answer 3

你没有在foo class div中放置任何值：

<div>1</div>
<div class="ree">2</div>
<div class="foo"> Value here              <-----
  <div class = "bar">Shoes
     <div class="nike">3</div>
<div class="puma">5</div>
<div class="gap">5</div>
  </div>
</div>
<div>4</div>

现在，如果您点击“此处值”。所有的div都消失了。这是为了让您的代码生效。

要在问题中实现您的目标，您需要更好地使用类匹配限定符。像其他人一样使用.sublings（）或.children（）。

Answer 4

我相信你想淡出除.foo及其子女之外的所有div。使用$.siblings()选择器。

$('.foo').on('click', function () {
    $(this).siblings().css('opacity','0.2')
});

将不透明度应用于多个DIV类

4 个答案: