Question

假设我使用JavaScript实现了一个基于网络的小游戏：
游戏结束时，会弹出一个带有多个按钮的菜单。一个按钮将播放器返回主菜单。当我打断游戏时，会出现相同的按钮。

                    <div class="menu gameOverMenu" style="display: none;">
                            <button class="menuButton" type="button" id ="playAgain">
                                    Play again
                            </button>
                            <button class="menuButton" type="button" id ="toMainMenu1">
                                    Main Menu
                            </button>
                    </div>
                    <div class="menu pauseMenu" style="display: none;">
                            <button class="menuButton" type="button" id ="continue">
                                    Continue
                            </button>
                            <button class="menuButton" type="button" id ="toMainMenu2">
                                    Main Menu
                            </button>
                    </div>

并处理按钮事件以通过jQuery返回主菜单：

        $('#toMainMenu1, #toMainMenu2' ).on('click', function(){
            switchUi("main");
        })

我不想再次使用相同的ID并且创建一个具有其他ID的类似按钮，因为我感觉不对。我应该用display：none创建按钮吗？属性一次在我的标记中并将其克隆到我的不同菜单中？为这两个按钮创建一个类？或者有更简单，更好的方法吗？我希望我遵循SO的发布规则，这是我第一次寻求帮助。

Answer 1

这是一个选项：

<div class="menu" style="display: none;">
    <div class="gameOverMenu" style="display: none;">
         <button class="menuButton" type="button" id ="playAgain">Play again</button>                    
    </div>
    <div class="pauseMenu" style="display: none;">
         <button class="menuButton" type="button" id ="continue">Continue</button>
    </div>
    <button class="menuButton" type="button" id="toMainMenu">Main Menu</button>
</div>

或者不要使用ID toMainMenu1和2，但使用类nagivateToMainMenu并在jQuery $("button.nagivateToMainMenu").on("click", function(){ switchUi("main"); });等中使用它。

<button class="menuButton nagivateToMainMenu" type="button" id="toMainMenu3000">Main Menu</button>

在多个上下文中使用相同按钮的正确方法

1 个答案: