JavaScript排他的思考の具体的な実装

前回のブログで、Xiao Xiong は関連する要素の操作方法を更新しましたが、同じ要素のグループがあり、特定の要素で特定のスタイルを実現したい場合はどうすればよいでしょうか。ここで循環排除の考え方が役に立ちます。

排他的思考のアルゴリズムは次のとおりです。
他者（自分自身を含む）を排除し、自分自身に対して達成したい効果を設定します。つまり、排他的なアイデアの実装手順は、すべての要素をクリアし、現在の要素を設定することです。

簡単に言えば、次のようになります。

すべての要素のスタイルをクリアする（他の要素を削除する）
現在の要素のスタイルを設定します（お任せください）

ここでの順序は逆にすることはできないことに注意してください。
たとえば、ページには 5 つのボタンがあり、ボタンをクリックするとそのボタンの色が変わるという周期的なクリックイベントを実装したいとします。どうすればよいでしょうか。

1. まず5つのボタンを作成しましょう。
以下のように表示されます。

    <button>ボタン 1</button>
    <button>ボタン 2</button>
    <button>ボタン 3</button>
    <button>ボタン 4</button>
    <button>ボタン 5</button>

2. 要素を取得する

<スクリプト>
    //要素を取得します var btn = document.getElementsByTagName('button');
     コンソールにログ出力します。
</スクリプト>

3. 印刷ボタンをループする

for(var i =0; i<btn.length; i++){
	コンソール.log(btn[i]
	}

4. 最初のforループ内の各ボタンにクリックイベントを追加します。まず、内側のループ内のすべてのボタンのスタイルをクリアし、次に外側のループで現在クリックされているボタンにスタイルを追加します。

btn[i].onclick = 関数(){
	(var j =0;j<btn.length;j++){
		btn[j].style.backgroundColor = '';
		}
	this.style.backgroundColor = '青';
}

最終的な効果は次のようになります。

ここに画像の説明を挿入

いくつかの例を見てみましょう。

1. シンプルなタブバー切り替え機能を実装する

コードは次のとおりです。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <!-- 完全なタブ切り替え効果ページを記述します-->
    <スタイル>
        * {
            マージン: 0;
            パディング: 0;
        }
        .box_1 {
            幅: 800ピクセル;
            高さ: 400px;
            背景色:rgb(141, 169, 173);
            マージン: 100px 自動;
        }
        ul {
            位置:絶対;
            上: 64px;
            左:220px;
            高さ: 35px;
            行の高さ: 35px;
            テキスト配置: 中央;
        }
        li {
            幅: 80ピクセル;
            高さ: 35px;
            リストスタイル: なし;
            フロート: 左;
            境界線: 1px 実線 #ccc;
            左マージン: 2px;
            左上の境界線の半径: 6px;
            右上の境界線の半径: 6px ;
        }
        .li1 {
            フォントの太さ: 700;
            色: 黒;
            下部境界線: なし;
            背景色: スカイブルー;
            カーソル: ポインタ;
        }
        。アイテム{
            表示:なし;
        }
    </スタイル>
</head>
<本文>
    <div クラス = 'ボックス'>
        <ul>
            <li class='li1'>タグ 1</li>
            <li>ラベル 2</li>
            <li class = 'li2' style="width:150px">適応幅のラベル</li>
        </ul>
       <div class="box_1">
        <div class="item" style = "display:block">最初のタグの内容</div>
        <div class="item">2 番目のタグの内容</div>
        <div class="item">適応幅ラベルの内容</div>
       </div>
    </div>
    <スクリプト>
        var li = document.querySelectorAll('li');
        コンソールログ(li);
        var item = document.querySelectorAll('.item');
        console.log(アイテム);
        (var i =0;i<li.length;i++){
            li[i].setAttribute('index',i);
            li[i].onclick = 関数(){
                (var j =0;j<item.length;j++){
                    li[j].className = '';
                    コンソールにログ出力します。
                }
                this.className = 'li1';
                var index = this.getAttribute('index');
                コンソールログ(インデックス);
                for(var k = 0; k < item.length; k++) {
                    アイテム[k].style.display='なし';
                }
                アイテム[インデックス].style.display = 'ブロック';
            }
        }
    </スクリプト>
</本文>
</html>

効果は次のとおりです。

ここに画像の説明を挿入

2. チェックボックスオプションがクリックされたときに対応する進行状況バーが増加するように、動的にクリック可能な調査結果表示ページを実装します。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        。箱{
            幅: 700ピクセル;
            マージン: 10px 自動;
        }
        。バー {
			幅:200px;
			高さ: 15px;
			パディング: 1px;
            背景色: rgb(250, 249, 249);
		}
        .bar_in{
            幅:7%;
            高さ:100%;
			遷移: 幅 0.5 秒;

        }
		.bar_in1 {
			背景色: オレンジ;
		}
        .bar_in2{
            背景色: 黄色;
        }
        .bar_in3{
            背景色: 茶色;
        }
        .bar_in4{
            背景色: チョコレート;
        }
        .bar_in5{
            背景色: 緑;
        }
        .bar_in6{
            背景色: 青;
        }
        .bar_in7{
            背景色: コーンフラワーブルー;
        }
        .bar_in8{
            背景色: ディープピンク;
        }
        .bar_in9{
            背景色: rgb(171, 204, 23);
        }
        .bar_in10{
            背景色: 赤;
        }
        tr{
            幅:800ピクセル;
            高さ: 40px;
           
        }
        td{
            フォントサイズ: 14px;
            幅: 200ピクセル;
            行の高さ: 40px;
            下境界線: 1px 実線 #ccc;
        }
         tr #no1{
            幅: 300ピクセル;
        }
        。ヘッダ{
            フォントサイズ: 16px;
            フォントの太さ: 700;
        }
        .t1 {
            幅: 500ピクセル;
        }
        スパン{
            色：赤;
            フォントサイズ: 14px;
        }
    </スタイル>
</head>
<本文>
    <div class="box">
        <テーブル>
            <tr>
                <td colspan="4" class= 'header'>「最も美しい田舎の女性教師」に感動しましたか? <span>(必須)</span></td>
            </tr>
            <tr>
                <td class='t1'><input type="checkbox" name="" >とても感動しました。彼女はとても美しいです</td>
                <td>
                    <div class="bar">
                    <div class="bar_in bar_in1">
                    </div>
                </div>
                </td>
                <td>0(0%)</td>
            </tr>
            <tr>
                <td class='t1'><input type="checkbox" name="" id="">とても感動しました。彼女はとても美しいです</td>
                <td>
                    <div class="bar">
                    <div class="bar_in bar_in2">
                    </div>
                </div>
                </td>
                <td>335733(96.16%)</td>
            </tr>
            <tr>
                <td class='t1'><input type="checkbox" name="" id="">感情がない、そういうことはたくさんある</td>
                <td>
                    <div class="bar">
                    <div class="bar_in bar_in3">
                    </div>
                </div>
                </td>
                <td>4997(1.43%)</td>
            </tr>
            <tr>
                <td class='t1'><input type="checkbox" name="" id="">感動はしない、多分誇大広告なんだろう</td>
                <td>
                    <div class="bar">
                    <div class="bar_in bar_in4">
                    </div>
                </div>
                </td>
                <td>8398(2.41%)</td>
            </tr>
        </テーブル>
        <テーブル>
            <tr>
                <td colspan="3" class= 'header'>Li Ling と彼女の学校のために、あなたは何をしてあげたいですか? <span>(必須)</span></td>
            </tr>
            <tr>
                <td class="t1"><input type="checkbox" name="" id="" >読書室が持てるように本を寄付してください</td>
                <td>
                    <div class="bar">
                    <div class="bar_in bar_in5">
                    </div>
                </div>
                </td>
                <td>163002(45.89%)</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id="">学校を修復できるように寄付してください</td>
                <td>
                    <div class="bar">
                    <div class="bar_in bar_in6">
                    </div>
                </div>
                </td>
                <td>52692(15.09%)</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id="">Li Ling の物語を友達に伝えましょう</td>
                <td>
                    <div class="bar">
                    <div class="bar_in bar_in7">
                    </div>
                </div>
                </td>
                <td>118533(33.96%)</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id="">何もしない</td>
                <td>
                    <div class="bar">
                    <div class="bar_in bar_in8">
                    </div>
                </div>
                </td>
                <td>14881(4.26%)</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id="">何もしない</td>
                <td>
                    <div class="bar">
                    <div class="bar_in bar_in9">
                    </div>
                </div>
                </td>
                <td>0(0%)</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id="">何もしない</td>
                <td>
                    <div class="bar">
                    <div class="bar_in bar_in10">
                    </div>
                </div>
                </td>
                <td>0(0%)</td>
            </tr>
        </テーブル>
    </div>
    <スクリプト>
        var 入力 = document.querySelectorAll('入力');
        var barin = document.querySelectorAll('.bar_in');
        var w = [10,98,30,25,50,22,38,30,34,20,20];
        console.log(typeof(5+'%'));
        console.log(barin);
        console.log(入力);
        for(var i =0;i<input.length;i++){
            入力[i].setAttribute('インデックス',i)
            input[i].onclick = 関数(){
                 var インデックス = this.getAttribute('index')
                barin[インデックス].style.width= w[インデックス]+'%';
            }
        }
    </スクリプト>
</本文>
</html>

効果は次のとおりです。

ここに画像の説明を挿入

JavaScript 限定のアイデアの具体的な実装に関するこの記事はこれで終わりです。より関連性の高い JavaScript 限定コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: