私はそれが厚い音を知っています。 しかし、それは本当に可能です。 ほぼ。 私の提案した方法は、大規模なプロジェクトにはほとんど適用できませんが、「猫に関するサイト」などの小さなプロジェクトでは、完全に機能するソリューションです。 私たちをソートする機能は、flexboxとcss変数（これらはカスタムプロパティでもあります）を提供し、jsはここでは必要ありません。
まず、ほとんどすべてのオンラインストアで表示できる並べ替え条件の簡単なリストを作成します。既定では、価格（昇順/降順）、アルファベット順（昇順/降順）で表示されます。
<input id="q1" type="radio" name="sort" checked> <label for="q1"> </label><br> <input id="q2" type="radio" name="sort"> <label for="q2"> , </label><br> <input id="q3" type="radio" name="sort"> <label for="q3"> , </label><br> <input id="q4" type="radio" name="sort"> <label for="q4"> , </label><br> <input id="q5" type="radio" name="sort"> <label for="q5"> , </label><br>
また、ソート可能なリスト自体。 このリストでは、各アイテムに製品名（この場合、「First」、「Second」など、および商品の価格）があります。
<div class="wrapper"> <div class="item"> - 20000</div> <div class="item"> - 17550</div> <div class="item"> - 17549</div> <div class="item"> - 17549</div> <div class="item"> - 17549</div> </div>
.wrapper { display: flex; flex-direction: column; }
リストを並べ替えるとはどういう意味ですか？ これは、リスト内の要素の相対位置を変更する必要があることを意味します。 flexブロックの子孫をorderプロパティで設定して、ブロック内の順序を変更できます。 要素に順序が指定されていない場合、その値はゼロです。 順序値が大きい要素はブロックの終わり近くに配置され、より小さい値を持つ要素は先頭に近くなります。 したがって、各アイテムのorderプロパティにリストアイテムの順序に関する情報を追加するだけです。 css変数はこれに役立ちます（わかりやすくするために、ここではインラインCSS）。
<div class="wrapper"> <div class="item" style="--default: 1; --cost: 20000; --title: 2;"> - 20000 </div> <div class="item" style="--default: 2; --cost: 17550; --title: 1;"> - 17550 </div> <div class="item" style="--default: 3; --cost: 17549; --title: 4;"> - 17549 </div> <div class="item" style="--default: 4; --cost: 17549; --title: 5;"> - 17549 </div> <div class="item" style="--default: 5; --cost: 17549; --title: 3;"> - 17549 </div> </div>
そして、css変数の値を順番に置き換えて、要素を正しい順序に並べます。
/* */ #q1:checked ~ .wrapper > .item { order: var(--default); } /* */ #q2:checked ~ .wrapper > .item, #q3:checked ~ .wrapper > .item { order: var(--cost); } /* */ #q4:checked ~ .wrapper > .item, #q5:checked ~ .wrapper > .item { order: var(--title); }
flex-directionプロパティを使用して、昇順/降順で並べ替えることができます。
#q3:checked ~ .wrapper, #q5:checked ~ .wrapper { flex-direction: column-reverse; }
残念ながら、「ほぼ」問題はすぐに明らかになります。これは冒頭で述べましたが、css変数で指定された要素のシーケンスは事前に決定する必要があります。 そして、これが価格に特別な問題を示さない場合、-cost変数に値をそのまま指定することができ、残りのソートでは、デフォルトでアルファベット順に、要素にインデックスを事前に与える必要があります。 このソリューションの利点には、ソート順の変更が即座に適用されるという事実が含まれます。
→これが実用プロトタイプです