javascript - Applying CSS property in Jquery

Question

I am working on 'OnClick' functionality in jQuery. When we click Div property other divs should fade out.

Please find the code below. 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')

              });

Here When I click on Div Class 'Nike', Except 'Nike' all Div classes should fade out. But here All Divs including Nike is fading out.

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

Thanks all

Answer 1

由于您有嵌套的 DIV，这些父 DIV 会逐渐淡出，也会导致您的nikediv 淡出。

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

演示

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

因此，我基本上列出了包含 nike 的树中的类，确保这些类都不受影响。

Answer 2

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

Answer 3

那么这段代码似乎更适合

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

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

Answer 4

我读的 HTML 全部 10 种错误。以下是修订后的简短甜美和重点。添加class="hideThis"到您想要“隐藏”的任何 div。如果您有多个要在单击时隐藏/显示的兄弟 div，您可以将所有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
}