javascript - 通过不透明度对 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>

假设用户点击了一个显示“Class 2”的按钮。我希望所有不是 2 类的东西的不透明度都为 .5，而 2 类的不透明度保持在 1。我试过使用 .not()，但我不熟悉它，大多数示例都在与 .siblings() 结合使用，我也不希望 sibling 消失。帮助？我不知道该怎么办。 编辑:对孤儿感到抱歉。 ^_^;修复它们!

Answer 1

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(...)

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

(示例:

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

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

)

这里:

$(this).next()...

对于按钮之后的所有 div，具有相同类名的情况与“相反”类名相同。