在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/