為什么切換 class 在我的 html 頁面中不起作用

Question

 <form method="POST" class="Main_Window" id="Main_form">
        <p class="animated bounceInLeft">Name :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </p>
        <input type="text" id="Name" class="animated bounceInRight" placeholder="Enter Your Name">
        <br><br>
        <p class="animated bounceInDown"> Odd/Even:</p>
        <select class="animated bounceInUp">
            <option value="odd">Odd</option>            
            <option value="even">Even</option>            
        </select>
        <br>
        <a class="animated bounceInRight" onclick="toggleClass();"><span class="tooltip" title="Click To Play!"><svg xmlns="http://www.w3.org/2000/svg" id="play" width="119.91" height="119.91"><path fill="#E74C3C" d="M58.8 10.8c-27.77 0-50.3 22.5-50.3 50.3 0 27.78 22.53 50.3 50.3 50.3 27.8 0 50.32-22.52 50.32-50.3 0-27.8-22.53-50.3-50.3-50.3zm0 97.97c-26.32 0-47.66-21.34-47.66-47.67 0-26.34 21.34-47.68 47.67-47.68 26.37 0 47.7 21.34 47.7 47.67 0 26.3-21.33 47.64-47.66 47.64z"/><path fill="#E74C3C" d="M58.8 21.12c-22.07 0-39.97 17.9-39.97 39.98s17.9 39.98 39.98 39.98c22.1 0 40-17.9 40-39.98s-17.9-39.98-40-39.98zm3.52 50.7L43.77 82.47l.04-21.37.07-21.37 18.5 10.72 18.5 10.72L62.3 71.82z"/></svg></span></a>
        <script>
            function toggleClass() {
                document.getElementById("play").classList.toggle('goDown');
                $("#Main_form").toggleClass("Main_Window", "Main_Window_1");
                $("#m2").toggleClass("Main_window2_2", "Main_window2");
            }
        </script>
    </form>
    <!-- This form is provided when the same player plays the match It is decided by the face detector-->
    <form method="POST" class="Main_window2_2" id="m2">
        <p class="animated bounceInLeft"> Enter Your Number</p>
        <input type="number" class="animated bounceInRight">
        <!-- Two labels to display the cpu and the provided number-->
        <br>
        <p class="animated bounceInDown"> Bat/Bow:</p>
        <select class="animated bounceInUp">
            <option value="bat">Batting</option>            
            <option value="bow">Bowling</option>            
        </select>
        <a class="animated bounceInRight" onclick="toggleClass();"><span class="tooltip" title="Click To Play!"><svg xmlns="http://www.w3.org/2000/svg" id="play" width="119.91" height="119.91"><path fill="#E74C3C" d="M58.8 10.8c-27.77 0-50.3 22.5-50.3 50.3 0 27.78 22.53 50.3 50.3 50.3 27.8 0 50.32-22.52 50.32-50.3 0-27.8-22.53-50.3-50.3-50.3zm0 97.97c-26.32 0-47.66-21.34-47.66-47.67 0-26.34 21.34-47.68 47.67-47.68 26.37 0 47.7 21.34 47.7 47.67 0 26.3-21.33 47.64-47.66 47.64z"/><path fill="#E74C3C" d="M58.8 21.12c-22.07 0-39.97 17.9-39.97 39.98s17.9 39.98 39.98 39.98c22.1 0 40-17.9 40-39.98s-17.9-39.98-40-39.98zm3.52 50.7L43.77 82.47l.04-21.37.07-21.37 18.5 10.72 18.5 10.72L62.3 71.82z"/></svg></span></a>
        <script>
            function toggleClass() {
                document.getElementById("play").classList.toggle('goDown');
                $("#m2").addClass("Main_window2_2");
                $('#p3').addClass("playing_window");
            }
        </script>
    </form>  

這是我編寫的代碼，當我單擊按鈕時，切換 class 名稱的 javascript 不起作用？ 您能糾正上述問題嗎？ 我已經在里面包含了所有需要的js文件控制台沒有錯誤

Answer 1

好的，回顧、總結和最小化你的代碼：

• 您有三個“窗口” （如果您不向服務器提交任何內容，請不要使用<form> ）
• 第一個有一個按鈕可以轉到下一個 window（至少據我所知）
• 您需要一個 .is .is-active class 來設置當前活動“窗口”的樣式：

 // get all.window and.next buttons elements const ELS_window = document.querySelectorAll(".window"); const ELS_next = document.querySelectorAll(".next"); let current = 0; // The current window index const nextWindow = () => { current += 1; current %= ELS_window.length; // Loop-back to 0 if needed ELS_window.forEach((el, i) => el.classList.toggle('is-active', i == current)); } ELS_next.forEach(el => el.addEventListener("click", nextWindow));

 /*QuickReset*/ * {margin:0;box-sizing:border-box;} html, body {height:100%; font:14px/1.4 sans-serif;}.window { position: fixed; top: 20vh; left: 20vw; width: 60vw; height: 60vh; border: 2px solid #777; padding: 40px; display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; transition: 0.5s; visibility: hidden; opacity: 0; pointer-events: none; }.window.is-active { /* just one class: */ opacity; 1: visibility; visible: pointer-events; auto; }

 <div class="window is-active"><.-- NOTICE! only one special .is-active class! --> <h2>WINDOW 1</h2> <button class="next" type="button">NEXT</button> </div> <div class="window"> <h2>WINDOW 2</h2> <button class="next" type="button">PLAY</button> </div> <div class="window"> <h2>GAME</h2> <button class="next" type="button">Exit game</button> </div>

以上將適用於無限數量的.window元素。