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

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

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

标题
第1类第1项

标题
第2类第1项

标题
第2类第2项

标题
第3类第1项

假设用户点击了一个按钮，上面写着“Class 2”。我希望不是2类的所有东西的不透明度都是，比如说，.5，而2类的不透明度保持在1。我尝试过使用.not（），但我不熟悉它，而且大多数示例都将其与.sibles（）结合使用，我也不希望这些sibles褪色。帮忙？我不知道该怎么办。 编辑：很抱歉孤儿s.^\uu^；修好了

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

---

将所有div（class

class2

的div除外）的不透明度设置为0.5。

如果您使用的是容器：

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

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

1.您的HTML无效<代码>缺少一个标签开口。根据我的假设，它应该是这样的：

第X类第1项

但这是非常不直观的语法。什么是

.description

内容？我建议你重写语法。例如：

第X类第1项

2.您可以在jQuery中使用

.not（）

方法或

：not（）

选择器 根据我的HTML版本。让我们编码吧

$（“a”）。在（'click'，function（）上{
var$t=$（this.parent（）；//例如单击了div.class2
$t.css（“不透明度”，1）.chiness（）.css（“不透明度”，1）；//撤消选择
$t.sides（）.not（“.”+$t.attr（“类”））.css（“不透明度”，0.5）；
//隐藏其他类。与选择器等效：
//$t.sides（“：not（.“+$t.attr（“class”）+”））.css（“不透明度”，0.5）；
});

检查它，这就是您想要的：

$("#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");
      }
    });
});

使用

$（“#容器按钮”）。单击（…）

可以访问

#容器中的每个按钮

$（此）。[0]。className
是您单击的按钮的类名。
单击按钮后，您将浏览容器中的每个按钮：

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

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

在容器中，将类名与单击的类名进行比较。如果不相同，则将“op05”类添加到按钮后的div中，并从按钮后的div中删除“op1”类：

（例如：

按钮后面的所有div都具有相同的类名，而“相反”类名也会发生相同的情况。
您的HTML无效。
a
标记打开丢失。请修复它。