当前位置：文江博客话题详情

检查多个可能字段的函数

发布于 2024-10-30 09:27:49 字数 262 浏览 5 评论 0原文

我正在制作问答应用程序。

http://jsfiddle.net/kaninepete/4YTA6/

我如何扩展它以允许多个相同类型的问题？

我不知道让函数知道要检查的女巫字段。

提前致谢。

编辑我想单独检查每个答案。这是否需要为每个问题提供一个新表格？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

囚你心 2024-11-06 09:27:49

这在技术上是可行的，但可能需要大量的清理工作——欢迎建设性的批评。（使 HTML 文件真正有效，不要直接链接到 jQuery，清理我的 jQuery 等。我还不是 jQuery 专家。）我采用了 JavaScript 查看所有适当的 HTML 并显示响应的路线（而不是基于 JavaScript 数组构建 HTML。）

您基本上可以复制粘贴

...

内容并更改 q-< 后面的数字/code> 和 a- 对于每个问题，它都会起作用。

理想情况下，我们将使用服务器端编程来验证答案（因为客户端可以轻松查看答案。）

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js" ></script>
</head>
<body>
    <form name="myform" id="myform">
        <p>Make each of the following possessive by adding the appropriate apostrophe where needed. </p>
        <ol type="1">
            <li>boys: 
                <input type="text" name="q-1" /><!-- field for user input -->
                <input type="hidden" name="a-1" value="boy's" /><!-- answer -->
            </li>
            <li>girls: 
                <input type="text" name="q-2" />
                <input type="hidden" name="a-2" value="girl's" />
            </li>
        </ol>
        <p><input type="button" id="validate-btn" value="Check" /></p>
    </form>

    <script type="text/javascript">
        $('document').ready( function() {
            $('#validate-btn').click( function() {
                $(this).css('display','none');
                $('[name|="q"]').each( function() {
                    // find the associated answer
                    var pattern = /q\-([0-9]+)/;    // regular expression to pull question/answer number from field name
                    var result = pattern.exec($(this).attr('name'))[1]; // get the question/answer number
                    // you could probably just navigate around with DOM to get the next hidden text field instead, eh.
                    // get reference to the input with the answer
                    var answerbox = $('[name="a-'+result+'"]');
                    $(this).attr('disabled',true);
                    // verify answer, display replacement text
                    if($(this).val() == answerbox.val()) {
                        $(this).replaceWith('   <strong>Correct!</strong>');
                    } else {
                        $(this).replaceWith('   <strong>Incorrect! The answer was "'+ answerbox.val() +'"</strong>');
                    }
                });
            });
        });
    </script>
</body>

This technically works but could probably use quite a bit of cleanup -- constructive criticism welcomed. (Make the HTML file actually valid, don't link directly to jQuery, clean up my jQuery, etc etc. I'm not a jQuery expert yet.) I went the route where the JavaScript looks at all the appropriate HTML and displays responses (instead of building HTML based off of JavaScript arrays.)

You can basically copy-paste the <li>...</li> stuff and change the number following q- and a- for each question and it will work.

Ideally, we'd be using server-side programming to verify answers (since the client can easily view the answers.)

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js" ></script>
</head>
<body>
    <form name="myform" id="myform">
        <p>Make each of the following possessive by adding the appropriate apostrophe where needed. </p>
        <ol type="1">
            <li>boys: 
                <input type="text" name="q-1" /><!-- field for user input -->
                <input type="hidden" name="a-1" value="boy's" /><!-- answer -->
            </li>
            <li>girls: 
                <input type="text" name="q-2" />
                <input type="hidden" name="a-2" value="girl's" />
            </li>
        </ol>
        <p><input type="button" id="validate-btn" value="Check" /></p>
    </form>

    <script type="text/javascript">
        $('document').ready( function() {
            $('#validate-btn').click( function() {
                $(this).css('display','none');
                $('[name|="q"]').each( function() {
                    // find the associated answer
                    var pattern = /q\-([0-9]+)/;    // regular expression to pull question/answer number from field name
                    var result = pattern.exec($(this).attr('name'))[1]; // get the question/answer number
                    // you could probably just navigate around with DOM to get the next hidden text field instead, eh.
                    // get reference to the input with the answer
                    var answerbox = $('[name="a-'+result+'"]');
                    $(this).attr('disabled',true);
                    // verify answer, display replacement text
                    if($(this).val() == answerbox.val()) {
                        $(this).replaceWith('   <strong>Correct!</strong>');
                    } else {
                        $(this).replaceWith('   <strong>Incorrect! The answer was "'+ answerbox.val() +'"</strong>');
                    }
                });
            });
        });
    </script>
</body>

回复收藏 0 原文