在Jquery中应用CSS属性

Question

我正在使用jQuery中的“ OnClick”功能。 当我们单击Div属性时，其他div应该淡出。

请在下面找到代码。 HTML：

<div>1</div>
<div class="ree">2</div>
<div class="foo">
  <div class = "bar">
     <div class="nike">3</div>
  </div>
</div>
<div>4</div>

jQuery的：

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

              });

在这里，当我单击Div类“ Nike”时，除“ Nike”外，所有Div类都应淡出。 但是，包括耐克在内的所有Divs都在逐渐消失。

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

谢谢大家

Answer 1

由于您嵌套了DIV，因此这些父DIV逐渐淡出，这也导致nike div淡出。

虽然这段代码并不完美……但是它可以满足您的需要。

DEMO

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

因此，我基本上在您的树中列出了包含耐克的类，请确保所有这些都不受影响。

Answer 2

我读了HTML的所有10种错误。 以下是经过修订的简短说明。 将class="hideThis"添加到要“隐藏”的所有div中。 如果您要单击时隐藏/显示多个同级div，则可以给它们全部hideThis类，然后用$('.hideThis')替换$('.nike') $('.hideThis')

$('.nike').click(function() {
  $(this).css('opacity','1'); //in case something else got clicked & hid this
  $('.hideThis').not($(this)).css('opacity','0.2'); //hide everything else
}

Answer 3

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

Answer 4

那么这段代码似乎更适合

$('.nike').on('click', function () {
  $('div').each(function () {
    if ($('.nike').closest($(this)).length == 0) {
        $(this).css('opacity', '0.2');
    }
  })
});

http://jsfiddle.net/H17737/nr5bL/