將不透明度應用於多個DIV類

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像酒吧，耐克，彪馬，差距DIV類應該顯示所有其他Div類應該淡出。

請找到下面的演示，

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

感謝所有

Answer 1

.siblings()

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

Example

Answer 2

你沒放在Foo類的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 3

我相信你想淡出所有的div除了.foo及其子女。使用$.siblings()選擇器。

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

• http://api.jquery.com/siblings/
• http://jsfiddle.net/6V8hr/16/

Answer 4

你:not選擇只需要排除孩子的div了。你可以把多件事情在沒有選擇器，就像任何其他：

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

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