Home>

Check the operation by putting Jquery of the following site in the page under production
Even though all the check boxes for the questionnaire are filled in as shown in the picture, "There are unanswered questions" is displayed. ≪I noticed that the cause is that the instruction of javascript overlaps with the script of the drawer menu, but I do not know how to use both smoothly

Can you tell me?
The current state of the bug is that the above question is displayed, and if you set the smartphone size and press the hamburger menu of the drawer, "There is an unanswered problem" is displayed.

Please let me know if I have to delete either script.
Of course, if this Jquery diagnostic test cannot be mixed with other scripts
Do not force it. Since it doesn't mean that the drawer menu is broken

code
[HTML]
<! DOCTYPE html>
<html>
<head>
  <meta charset = "UTF-8">
  <meta http-equiv = "X-UA-Compatible" content = "IE = edge">
  <meta content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, minimum-scale = 1.0" name = "viewport">
  <meta name = "keywords" content = "Second Life, Day Trade, Arbitrage, Alchemy, Investment">
  <meta name = "description" content = "pseudo-experience project, binary options">
<link rel = "SHORTCUT ICON" HREF = "">
<title>Second Life | Road to Investment Master</title>
<!-Include jQuery Library->
        <link rel = "stylesheet" href = "css/reset.css" type = "text/css" charset = "utf-8" />
        <link rel = "stylesheet" href = "css/style.css" type = "text/css" charset = "utf-8" />
        <link href = "css/sandbox.css" rel = "stylesheet">
        <link href = "dist/css/drawer.css" rel = "stylesheet">
        <link rel = 'stylesheet' href = 'https: //fonts.googleapis.com/css? family = Slabo + 27px'>
        <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
          <script src = "https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.js"></script>
          <script src = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
          <script src = "dist/js/drawer.min.js" charset = "utf-8"></script>
          <script>
    $(document) .ready (function () {
      $('. drawer'). drawer ();
    });
  </script>
<script>
    $(function () {
                // When the button is clicked$("button"). click (function () {
                    // Hide the result once
                    $(". result"). hide ();
                    // Get the number of problems
                    var qNum = $("ul.shindan-questions li"). length;
                    if ($("ul.shindan-questions li input: checked"). length<qNum) {
                        // Alert if not checked
                        alert ("There are unanswered issues");
                    } else {
                        // Get the number of inputs checked
                        var typeANum = $(". typeA: checked"). length,
                            typeBNum = $(". typeB: checked"). length,
                            typeCNum = $(". typeC: checked"). length,
                            typeDNum = $(". typeD: checked"). length;
                        if (typeANum>= typeBNum&&typeANum>= typeCNum&&typeANum>= typeDNum) {
                            // If there are more A, display A type
                            $(". resultA"). fadeIn ();
                        } else if (typeBNum>= typeANum&&typeBNum>= typeCNum&&typeBNum>= typeDNum) {
                            // If there are more Bs, display B type
                            $(". resultB"). fadeIn ();
                        } else if (typeCNum>= typeANum&&typeCNum>= typeBNum&&typeCNum>= typeDNum) {
                            // If there are more Bs, display B type
                            $(". resultC"). fadeIn ();
                        } else if (typeDNum>= typeBNum&&typeDNum>= typeCNum&&typeDNum>= typeANum) {
                            // If there are more Bs, display B type
                            $(". resultD"). fadeIn ();
                        }
                    }
                });
            })
        </script>

</head>
~ The following is omitted ~

https://sole-color-blog.com/demos/20170403/

  • Answer # 1

    There is a problem with the process of obtaining the number of questions (it looks like a Zen question)

    // Get the number of problems
    var qNum = $("ul li"). length;

    Since all li elements on the page are counted, the elements of the drawer menu will be counted.
    You can narrow down by assigning an appropriate class to the ul element in the problem sentence.

    Because it is abbreviated, write it properly

    <ul>


    // Get the number of problems
    var qNum = $("ul.shindan-questions li"). length;


    Then

    If there is a class already assigned to the ul on the question side, use that.

    And the source code of the question sentence is not too late, so please wrap it with `
    Just select the chord and press the<code>button.