Question

我有这段代码。如果回答错误，它应该是一个只有一个问题的简单测验和另一个带有正确答案的弹出窗口。

<html>
  <head>
    <script type="text/javascript" src="jquery.jsx"></script>
    <script>

    $(document).ready(function() {
      $("#results").click(function() {                
        if (!$("input[@name=q1]:checked").val()) {            
          alert("You're not done yet!");        
        }        
        else {            
          var cat1name = "1";            
          var cat2name = "None";                                  
          var cat1 = ($("input[@name=q1]:checked").val() != "a"); 
          var cat2 = (!cat1); var categories = [];                        
          if (cat1) {
            categories.push(cat1name);
          }
          if (cat2) {
            categories.push(cat2name);
          }
          var catStr = 'You answered the following questions incorrectly: ' + categories.join(', ') + '';                     
          $("#categorylist").text(catStr);                        
          $("#categorylist").show("slow");            
          if (cat1) {
            $("#category1").show("slow");
          }            
          if (cat2) {
            $("#category2").show("slow");
          }
          $("#closing").show("slow");
        }
      });
    });

    </script>
  </head>
  <body>
    ... some CSS
    ... the question look like this:
    <p class="question">1. What is the answer to this question?</p>        
    <ul class="answers">            
      <input type="radio" name="q1" value="a" id="q1a"><label for="q1a">Answer 1</label><br/>          
      <input type="radio" name="q1" value="b" id="q1b"><label for="q1b">Answer 2</label><br/>            
      <input type="radio" name="q1" value="c" id="q1c"><label for="q1c">Answer 3</label><br/>            
      <input type="radio" name="q1" value="d" id="q1d"><label for="q1d">Answer 4</label><br/>       
    </ul>          
    <br/>
    <div id="results">            
      Show me the answers!       
    </div>
  </body>
</html>

守则来自此网站http://www.hungrypiranha.org/make-a-website/html-quiz。

我想调整代码，只有一个问题。使用10个样本复制并粘贴代码可以正常工作。但是一旦我缩短代码，它就不起作用了。单击answerwere按钮不会执行任何操作。我该怎么监督？

Answer 1

如果您格式化代码（例如在JSFiddle中），您会发现最后有不匹配的大括号。从alert(catStr);开始。

$(document).ready(function () {
    $("#results").click(function () {

        if (!$("input[@name=q1]:checked").val()

        ) {
            alert("You're not done yet!");
        } else {
            var cat1name = "1";
            var cat2name = "None";


            var cat1 = ($("input[@name=q1]:checked").val() != "a");

            var cat2 = (!cat1);
            var categories = [];

            if (cat1) {
                categories.push(cat1name)
            };
            if (cat2) {
                categories.push(cat2name)
            };


            var catStr = 'You answered the following questions incorrectly: ' + categories.join(', ') + '';
            $("#categorylist").text(catStr);
            $("#categorylist").show("slow");

            if (cat1) {
                $("#category1").show("slow");
            };
            if (cat2) {
                $("#category2").show("slow");
            }; {
                $("#closing").show("slow");
            };
        }
    });
});

建议您使用一个编辑器，它可以提供良好的代码格式，因为它容易在大括号中迷失：）

简单的jQuery测验不会执行

1 个答案: