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

【问题标题】：Applying opacity to multiple DIV classes将不透明度应用于多个 DIV 类
【发布时间】：2013-10-31 07:17:36
【问题描述】：

我正在开发 jQuery 中的“OnClick”功能。当我们点击 parent div 属性时，只有 parent 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/

谢谢大家

【问题讨论】：

标签： jquery css html

【解决方案1】：

.siblings()

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

Example

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

您没有在 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()。

【讨论】：