CSSでズンドコキヨシしたかった

  • 1
    Like
  • 0
    Comment
More than 1 year has passed since last update.

CSSだけじゃできなかった!
最初だけjs使いました。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
    <script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
    <script>
        $(function(){
            var target = $('.js-zundocoBox li');
            function zundoco(){
                    for (var i = 0; i <target.length; i++){
                        var num = Math.round(Math.random());
                        if (num == 0) {
                            target.eq(i).attr('class','zun').empty().append('ズン');
                        } else {
                            target.eq(i).attr('class','doco').empty().append('ドコ');
                        };
                    };
            };
            zundoco();
            $('#retry').on('click',function(){
                zundoco();
            });
        });
    </script>
    <style>
    /*必須箇所*/
        .js-zundocoBox li:last-child::after{
            content: 'キヨシできなかったよ……';
        }
        .zun + .zun + .zun + .zun + .doco::after{
            content: 'キ・ヨ・シ!';
        }
        .zun + .zun + .zun + .zun + .doco ~ li{
            display: none;
        }
    </style>
</head>
<body>
    <article class="wrap" id="id">
        <h1>ズンドコ</h1>
        <ul class="js-zundocoBox">
            <li></li>
            <li></li>
            <li></li>//これを100個くらい
        </ul>
        <div id="retry">やりなおし</div>
    </article>
</body>
</html>

サンプル

解説

js部

  • liに.zunもしくは.docoをランダムで割り振る、ついでにliの中にズンもしくはドコも入れる
  • (別になくてもよかったけどせっかくなので)やりなおしボタンでズンドコを入れ直す

css部

  • .js-zundocoBox li:last-child::after
    liを全部使ってもキ・ヨ・シ!できなかった場合に失敗したことを表示させる
  • .zun + .zun + .zun + .zun + .doco::after
    隣接セレクタでズンドコ判定してキ・ヨ・シ!を表示させる
  • .zun + .zun + .zun + .zun + .doco ~ li
    ズンドコ判定が出た後のliを非表示にする

+セレクタと~セレクタで解決します。かんたん。