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 Class'Nike'时，除了'Nike'之外，所有Div类都应该淡出。但是包括耐克在内的All 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')
});

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

Answer 2

我读了所有10种错误的HTML。以下是经修订的，简短的甜点和重点。将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
}

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/

在Jquery中应用CSS属性

4 个答案: