通过不透明度对div类进行排序

Question

所以我使用类来对不同的内容进行排序，但我实际上并不确定如何应用这种排序。

    <div class="class1"><div class="heads">Title</div>
<div class="description"><p>Class 1 Item 1</p></div></div>

<div class="class2"><div class="heads">Title</div>
<div class="description"><p>Class 2 Item 1</p></div></div>

<div class="class2"><div class="heads">Title</div>
<div class="description"><p>Class 2 Item 2</p></div></div>

<div class="class3"><div class="heads">Title</div>
<div class="description"><p>Class 3 Item 1</p></div></div>

因此，我们假设用户点击了一个标有＆＃39; Class 2＆＃39;的按钮。我希望不是第2类的所有东西的不透明度，比如说.5，而2级的不透明度保持在1.我尝试使用.not（），但我不熟悉有了它，大多数例子都与.siblings（）结合使用，而且我也不希望兄弟姐妹褪色。救命？我不知道该怎么做。 编辑：对于孤儿的抱歉。 ^ _ ^;修正了他们！

Answer 1

$("div").not(".class2").css("opacity", "0.5")

会将所有div的不透明度设置为除{class 1}}为0.5之外的其他div。

Answer 2

如果您使用的是容器：

$('.container>div:not(.class2)').css('opacity', 0.5);

Answer 3

1。您的HTML无效。缺少a代码开头。根据我的假设，它应该是这样的：

<div class="classX">
    <a href="#" class="heads">Title</a>
</div>
<div class="description">
    <p>Class X Item 1</p>
</div>

但这是非常不直观的语法。什么是.description内容？我建议你重写语法。例如：

<div class="classX">
    <a href="#" class="heads">Title</a>
    <div class="description">
        <p>Class X Item 1</p>
    </div>
</div>

2。您可以在jQuery中使用.not()方法或:not()选择器

根据我的HTML版本。我们的代码！

$("a").on('click', function(){
    var $t = $(this).parent(); // clicked div.class2 for example
    $t.css("opacity", 1).siblings().css("opacity", 1); // undo selection
    $t.siblings().not("."+$t.attr("class")).css("opacity", 0.5); 
    // hide other classes. Equivalent with selector:
    //$t.siblings(":not(."+$t.attr("class")+")").css("opacity", 0.5); 
});

检查它是否符合您的要求： http://jsfiddle.net/Tymek/2k85m8r9/

Answer 4

<强> http://jsfiddle.net/orjj65g0/7/

$("#container button").click(function() {
    var className = $(this)[0].className;
    $("#container button").each(function() {
      if($(this)[0].className !== className) {
        $(this).next().addClass("op05");
        $(this).next().removeClass("op1");
      } else {
        $(this).next().addClass("op15");
        $(this).next().removeClass("op05");
      }
    });
});

使用$("#container button").click(...)，您可以访问#container中的每个按钮。

$(this).[0].className是您点击的按钮的类名。 单击按钮后，您将浏览容器中的每个按钮：

$("#container button").each(...)

在容器中，您将类名与单击的类名进行比较。如果不一样，那就加上课程＆＃34; op05＆＃34;按钮后面的div并删除类＆＃34; op1＆＃34;从按钮后面的div：

（示例：

<button class="classN">click</button>
<div class="content">div after button</div>

$(".classN").next()...

）

下面：

$(this).next()...

对于按钮之后的所有div，具有相同类名的div发生在＆＃39;反对＆＃39;之后。班级名称。