简单的 jQTouch 基于表单的产品选择器答案

【问题标题】：Simple jQTouch Form-based product selector简单的 jQTouch 基于表单的产品选择器
【发布时间】：2010-10-19 06:40:16
【问题描述】：

我正在使用 jQTouch 构建一个带有 html/js/jquery 表单的简单移动应用程序，该表单充当产品选择器。它有 5 个下拉菜单和 6 种可能的场景：

场景：有 6 种产品 - 选择得分最多的产品。然后用户会被带到包含该产品内容的 div（在 jQTouch 中充当页面）。

表格：

问题 1

选项 1：产品 A 1 分，产品 C 1.5 分
选项 2：产品 B 1 分，产品 D 1 分
选项 3：产品 C 1 分，产品 E 1 分
选项 4：产品 F 1.5 分

- 以此类推，共 5 个问题。

由于这是使用 jQTouch，我希望让表单找出哪个产品的得分最高，然后将用户带到适当的 div（页面）。请问有谁知道完成这项任务的最佳方法吗？

非常感谢所有帮助。 :) 谢谢。

【问题讨论】：

在你走得太远之前，我会搬到 jquery mobile，jqtouch 项目已经停止。
不幸的是，这可能为时已晚——这只是其中的一部分，应用程序的其余部分已经完成。 JQTouch 似乎是一个更好的选择，因为 JQuery Mobile 在开发过程中才发布了它的第一个 alpha。

标签： javascript jquery html forms jqtouch

【解决方案1】：

想通了，并认为发帖可能对其他人有帮助:) 在 jQTouch + phonegap 中工作。
在 HTML 中：

        <form name="myForm" action="">
        <p>1. Question 1</p>
            <span>
            <select id="rofy-q1" name="q1" class="btn">
                <option value="0" disabled="disabled">Please select</option>
                <option value="50">Option 1</option>
                <option value="100">Option 2</option>
                <option value="200">Option 3</option>
                <option value="300">Option 4</option>
                <option value="400">Option </option>
            </select>
        </span>
        <p>2. Question 2</p>
            <!-- ETC - fill out the remaining questions as per q1 but change the 'name' to q2, q3 etc. -->
        <span class="buttoncontain"><input href="#" type="button" value="Click to see your results" class="btn" onclick="getProduct();"></span>
        </form>

<script type="text/javascript" charset="utf-8">
        function getProduct() {
            // Get scores - a=answer, q=question
            var a1 = document.myForm.q1.value;
            var a2 = document.myForm.q2.value;
            var a3 = document.myForm.q3.value;
            // Calculate the scores
            var userCalc = parseInt(a1) + parseInt(a2) + parseInt(a3);
            // Suggest a product based on scores
            if (userCalc <= 99) {
                // alert("Product 1");
                jQT.goTo("#p1");
            } else if (userCalc <= 199) {
                // alert("Product 2");
                jQT.goTo("#p2");
            } else {
                // alert("Product 3");
                jQT.goTo("#p3");
            }
            // End functions
        }
        </script>

【讨论】：