使用.show()和.hide()功能的JavaScript/JQuery代码的故障排除

Troubleshooting of JavaScript/JQuery code with .show() and .hide() functionality

本文关键字：排除 JQuery 代码 故障 功能 show hide 使用 JavaScript      更新时间：2023-09-26

我正在构建一个网页，页眉和页脚保持不变，两个可选的元素组将在用户浏览网站时相互替换。网页正在用JavaScript, JQuery, Bootstrap构建

这里是一个极其简化的index.html和我的JavaScript/JQuery函数的确切副本:

<!DOCTYPE html>
<html>
    <head>
        <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <header>Header</header>
        <div class="container">
            <!-- if I remove the below form and just leave a stand-alone button
             (no longer type="submit") it will work as expected by me -->
            <form role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Main text field" id="main_input">
                </div>
                <button type="submit" class="btn btn-default" id="main_search" onclick="OpenSearchScreen()">Switch to Search</button>
            </form>
            <div class="row" id="mainDiv">
                <br/>
                <p>We are in Main</p>
             </div>
            <div class="row" id="searchDiv" hidden>
                <br/>
                <p>We are in Search</p>
            </div>
        </div>
        <footer>Footer</footer>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
        <script src="misc.js"></script>
    </body>
</html>



// hides parts of Home screen
// shows Search screen
function OpenSearchScreen() {
    // hide Main components
    $("[id^='main']").hide();
    // reveal Search components
    $("[id^='search']").show();
}
// hides Search screen
// shows Home screen
function OpenHomeScreen() {
    // hide Search components
    $("[id^='search']").hide();
    // reveal Main components
    $("[id^='main']").show();
}

上面的HTML + JS组合不工作:它短暂地显示Search，然后恢复到Main。

正如我在评论中指出的那样，如果我删除form，只是放入一个常规(独立)button，具有相同的onclick设置，一切都如预期的那样工作:当我按下按钮Main切换到Search并保持原样。

我有以下两个问题/请求:

  1. 如果你知道为什么会这样，请告诉我。如果有一个想法如何可以修复/工作周围请与我分享。

  2. 如果你能建议我如何进一步解决这个问题，请做。我完全不知道如何继续，因为我似乎可以调试(通过Chrome开发工具)JS部分。一旦程序通过OpenSearchScreen函数，然后退出form元素，我就不能再跟踪它的进度。

你正在使用一个提交按钮，而不是阻止它的默认行为，这就是为什么它在提交表单，而你只在表单提交之前看到一瞬间的变化。

你可以这样写:

<button type="submit" class="btn btn-default" id="main_search" onclick="OpenSearchScreen(); return false;">
   Switch to Search   
</button>

jsFiddle这里

或者更好的是，删除所有的内联JS，并在外部处理。

相关文章：