選択したすべてのCSSサークルをアクティブにします

debugcn 投稿 Dev

プラタメシュドーク

1、2、3のようなすべての円をクリックすると、3つの円すべてとそれらの接続された線が赤い色で塗りつぶされ、3、2、1のように戻ると、css円のプログレスバーを作成しようとしています。色を削除する必要があります。

HTML：

<div class="row well" id="rows">
        <ul id="progressbar" class="progressbar">
            <li class="cir danger">THOUGHFUL</li>
            <li class="cir">PASSION</li>
            <li class="cir">POWER OF DESIGN</li>
            <li class="cir">BUILDING RELATIONSHIPS</li>
            <li class="cir">ENHANCE HUMAN INTERATION</li>
        </ul>
    </div>

JS：

var header = document.getElementById("rows");
        var bar = document.getElementsByClassName("progressbar");
        var btns = header.getElementsByClassName("cir");
        for (var i = 0; i < btns.length; i++) {
            btns[i].addEventListener("click", function () {
                var danger = document.getElementsByClassName("danger");
                danger[0].className = danger[0].className.replace("danger", "");
                this.className += " danger";
            });
        }

サンプルImg：

上記の画像を参照すると、円3をクリックすると、円1、2、3が赤色になり、円2をクリックすると、円3が白、1と2が赤になり、その逆も同様です。JSで達成しようとしましたがclassnotfoundエラーです。

これについての助けをいただければ幸いです。

シンボリックリンク

円がクリックされるたびに、そのデータIDを取得し、同じかそれ以下のデータIDのすべての円をアクティブにします。

let circles = document.querySelectorAll(".circle")
circles.forEach(el => {
   el.addEventListener("click", (e) => {
     let id = e.target.dataset.id
     circles.forEach(el2 => {
        if(el2.dataset.id <= id){
            el2.classList.add("active")
        }else{
            el2.classList.remove("active")
        }
     })   
   })
})

.circled{display:flex}
.circle{
   border-radius:50%;
   width:50px;
   height:50px;
   border: solid 2px #333;
   display:inline-flex;
   align-items:center;
   justify-content:center;
   position:relative;
   margin-left: 44px;
   cursor:pointer;
}

.circle:not(:first-of-type)::before{
   height: 2px;
   width: 50px;
   content:"";
   background-color: #333;
   position:absolute;
   left:-50px;
}

.circle.active{
   border-color: #f00;
}

.circle.active:not(:first-of-type)::before{
   background-color: #f00;
}

<div class="circles">
   <div class="circle active" data-id="1">1</div>
   <div class="circle" data-id="2">2</div>
   <div class="circle" data-id="3">3</div>
   <div class="circle" data-id="4">4</div>
   <div class="circle" data-id="5">5</div>
</div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-12

コメントを追加

サインイン

分類Dev

Related 関連記事

記事

選択したすべてのCSSサークルをアクティブにします

選択したすべてのCSSサークルをアクティブにします

PowershellのComOjectExcel.Applicationを使用して、アクティブなワークシートのすべてのセルを選択します

サブクエリのすべての値に一致するテーブルからすべての値を選択します

サブクエリのすべての値に一致するテーブルからすべての値を選択します

アクティブなページのすべての行のみを選択しますjqueryDatatable

選択したtabItemに応じてリアクティブデータフレームを作成します

1つのテーブルからすべての行を選択し、テーブル2から選択した行を選択するSQLクエリ

ユーザーが他にアクティブなサブスクリプションを持っていないすべてのサブスクリプションを選択します

cosmos DB：クエリでテーブル名を使用してテーブル内のすべてのアイテムを選択します

選択ボックスから「その他」を選択し、テキストフィールドをアクティブにします

再クエリに続いて、Accessサブフォームでアクティブセルを再選択します

cssにはリストボックスがあり、テキストの色をアクティブまたは非アクティブ、フォーカスまたは非フォーカスとして変更しないことを選択する必要があります。そのクリック追加、クリック追加

MySQLクエリ：テーブル内のすべてのアクティブを選択しますが、id = 1の非アクティブを受け入れます

AngularJS-選択したアイテムに基づいて、GoogleマップディレクティブのスコープをJSONから変更します

cssでアクティブリンクの前にリンクを選択します

Vimperatorを使用してFirefoxで以前にアクティブだったタブを選択します

店舗の支店に応じて、テーブルの特定のプレフィックスを選択します

サブクエリでテーブルを選択します

各動的テーブルのすべてのチェックボックスを選択します

razorviewテーブルのすべてのチェックボックスを選択します

テーブルJQueryのすべてのチェックボックスを選択します

jQueryはテーブル行内のすべてのチェックボックスを選択します

単一のアイテムをクリックして、リサイクラービューのすべてのアイテムを選択します

Oracleは、テーブル内のすべてのオブジェクトの最大日付を選択します

テーブルのアクティビティを監視します（特定の行の選択数）

光沢のあるリアクティブサブセットデータに基づいて動的に入力を選択します

cssのみのアクティブタグの含まれているtrを選択します

ACFをインストールしてアクティブ化しましたが、カスタムフィールドに基づいて特定のWPページを選択するためにそれらを使用できません

アクティブセルで画像を選択します

フィルタリングなしでテーブルのすべての行をスリック選択