Question

我正在尝试使用jQuery Mobile创建一个包含3个按钮的HTML订单类型页面：

提货
放下
发货

我已经创建了按钮并将它们正确放置在页面上。现在，我想根据用户点击的按钮显示一个独特的表单。

看一下示例，看来我的选择是jQuery，AJAX或Javascript。我已经在使用jQuery了，所以我试着走这条路，没有运气。添加了HTML和JS Alert ...我的页面将完全忽略HTML的加载，但仍显示警报。我已经验证我的div已正确命名，并且每个链接都有正确的ID设置。所以我放弃了jQuery。

on to javascript ...在我之间的标签中添加我的逻辑并再次...它忽略了HTML内容的加载。我已经尝试将内容放入div，重命名div，将表单代码移动到单独的.html和.txt，但仍然没有运气。我找到了一个有效的示例here并尝试将其代码强行放入我的页面。同样，当我的页面中包含按钮点击时，它不会加载任何内容。（我使用的是Chrome版本35.0.1916.153）

目前，我的页面代码如下：

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>Order Type</title>

    <script type="text/javascript">
        function showDiv(idInfo) {
          var sel = document.getElementById('divLinks').getElementsByTagName('div');
          for (var i=0; i<sel.length; i++) {
            sel[i].style.display = 'none';
          }
          document.getElementById('result'+idInfo).style.display = 'block';
        }
    </script>

    <link rel="stylesheet" href="assets/css/pp_mis_oa.css" />


    <!-- Standard jQquery Mobile themes can be created and replaced, to apply universal styling -->
    <!-- Go to: http://jquerymobile.com/themeroller/index.php to build one, and download it to the themes directory. -->
    <link rel="stylesheet" href="themes/jqm-test/theme.min.css" />

    <!-- Do not edit or remove the following jQuery framework files. -->
    <link rel="stylesheet" href="lib/jquery.mobile.structure-1.3.1.min.css" />
    <script src="lib/jquery-1.9.1.min.js"></script>
    <script src="lib/jquery.mobile-1.3.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.4.min.js" type="text/javascript"></script>
</head>

<body>

    <!-- Start Main Landing Page -->
    <div data-role="page" data-theme="b" class="has_footer">

        <div data-role="content">
            <p>
            <div id="buttonDiv" data-role="navbar">
                <ul>
                    <li><a href="#" class="ui-btn-active ui-state-persist" id="eat_in" onclick="showDiv('1');return false">Pick Up</a></li>
                    <li><a href="#" id="take_out" onclick="showDiv('2');return false">Drop Off</a></li>
                    <li><a href="#" id="delivery" onclick="showDiv('3');return false">Ship It</a></li>
                </ul>
            </div><!-- /navbar -->
            <div id="result" style="clear:both;"></div>

        </div> <!-- End Content Div -->

        <!-- start footer -->
        <div data-role="footer" data-position="fixed" data-id="footer-nav" data-theme="d" class="footer-bar">
            <div class="ui-grid-solo">
                <div class="ui-block-a"><button type="v" data-theme="b">Continue</button></div>
            </div>
        </div><!-- end footer -->

    </div>
    <!-- End Main Landing Page -->

    <div id="divLinks">
        <div id="container1">Container #1<p>Whole bunch of text 1</div>
        <div id="container2">Container #2<p>Whole bunch of text 2</div>
        <div id="container3">Container #3<p>Whole bunch of text 3</div>
    </div>

</body>

这里发生了什么，jQuery / Javascript拒绝将我的内容加载到我的div中？有人可以帮助我指出正确的方向吗？

谢谢！

Answer 1

我认为您正在尝试使用ID＆＃34;结果＆＃34; + IdInfo来显示div，其中div id为container1，container2和container3，因此您应该替换：

document.getElementById('result'+idInfo).style.display = 'block';

的

document.getElementById('container'+idInfo).style.display = 'block';

另外请记住，加载html中的所有表单（即使它们是隐藏的）也不是一个好习惯，所以有人可以看到他不需要的东西（也可以提交它）。考虑使用一些动态语言（例如PHP）来仅加载用户类型所需的表单。

Answer 2

如果您想使用jQuery执行此操作，可以将showDiv函数更改为以下内容：

function showDiv(idInfo) {
  //hide all divs
  $('#divLinks div').each(function() { $(this).hide(); });
  //show the one selected
  $('#container'+idInfo).show();
}

将内容从“容器”div移动到“结果”div：

function showDiv(idInfo) {
  //populate "result" div with selected content
  $('#result').html($('#container'+idInfo).html());
}

jQuery Load Divs破碎

2 个答案: