Q&A
プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入（エラーメッセージの場合は不要）の手順で「コードハイライト化」してください。（質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください）
下記のサイトのJqueryを制作中のページに入れて動作チェックすると
写真のように質問事項のチェックボックスを全て埋めているにも関わらず「未回答の問題があります」と表示されます。 原因はjavascriptの指示がドロワーメニューのスクリプトと重なっていることだと気づきましたが、どちらもスムーズに使える方法がわかりません
教えて頂けないでしょうか？
今のバグの状態は上記の質問事項の件と、スマホサイズにしてドロワーのハンバーガーメニューを押すと「未回答の問題があります」と表示されることです。
これはどちらかのスクリプトを消さないと駄目なのか教えてください。
もちろん、このJqueryの診断テストが他のスクリプトと混在して使えないということであれば
無理には使いません。 ドロワーメニューが壊れては意味ないので
コード 【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="セカンドライフ,デイトレード,アービトラージ,錬金術,投資"> <meta name="description" content="疑似体験プロジェクト、バイナリーオプション"> <link rel="SHORTCUT ICON" HREF=""> <title>セカンドライフ｜投資マスターへの道</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(){ //ボタンがクリックされた時 $("button").click(function(){ //一度結果を非表示にする $(".result").hide(); //問題数を取得 var qNum = $("ul.shindan-questions li").length; if( $("ul.shindan-questions li input:checked").length < qNum ){ //全てチェックしていなかったらアラートを出す alert("未回答の問題があります"); } else { //チェックされているinputの数を取得 var typeANum = $(".typeA:checked").length, typeBNum = $(".typeB:checked").length, typeCNum = $(".typeC:checked").length, typeDNum = $(".typeD:checked").length; if( typeANum >= typeBNum && typeANum >= typeCNum && typeANum >= typeDNum ) { //もしもAの方が多かったらAタイプを表示 $(".resultA").fadeIn(); } else if( typeBNum >= typeANum && typeBNum >= typeCNum && typeBNum >= typeDNum ) { //もしもBの方が多かったらBタイプを表示 $(".resultB").fadeIn(); } else if( typeCNum >= typeANum && typeCNum >= typeBNum && typeCNum >= typeDNum ) { //もしもBの方が多かったらBタイプを表示 $(".resultC").fadeIn(); } else if( typeDNum >= typeBNum && typeDNum >= typeCNum && typeDNum >= typeANum ) { //もしもBの方が多かったらBタイプを表示 $(".resultD").fadeIn(); } } }); }) </script> </head> ～以下、省略～
https://sole-color-blog.com/demos/20170403/
このタイトルでは別のバージョンのjQuery本体を複数読み込んでいるかのような印象を受けます。実際の要件にもっと寄せたものにしてください。また、htmlを省略されてしまうと再現確認及び調整ができません。再現確認可能で全体の流れがわかるコードをご提示ください。
回答1件
0
ベストアンサー
問題数の取得処理に問題があります（なんか禅問答みたいだな）
//問題数を取得 var qNum = $("ul li").length;
ページ上全てのli要素をカウントしているのでドロワーメニューの要素も勘定しているのでしょう。
問題文のほうのul要素に適当なクラスを付与し、絞り込みすればよいでしょう。
略されているので適当に書きますが
<ul class="shindan-questions">
して
//問題数を取得 var qNum = $("ul.shindan-questions li").length;
すると
すでに質問側のulに何らかのクラスが付与されていたら、そちらを使ってください。
あと、質問文のソースコードは今からでも遅くないから```で括ってね。
コード部分を選択して、<code>ボタンを押すだけです。
投稿2018/08/30 22:26
総合スコア4447
ご回答ありがとうございます。 指示して頂いたようにスクリプト内のulにクラスを付けて、アップしなおしたらローカル上は診断テストは問題なく動きました。
あとはハンバーガーメニューがクリックすると、まだ「未回答の問題があります」と表示されます。 FTPにjavascript、CSS、HTMLファイルアップしなおしてもサーバー上では更新されませんが、スクリプトに対してもHTML上で「.js?0831」などと記述する必要ありますか？
全て解決できました。 ハンバーガーメニューにも<button>タグが使われていたので、診断テストの方の<button>にクラスを指定したら、なんなく修正できました。 非常に勉強になりました。 また作業で詰まったらご質問させて頂くと思います。 ありがとうございました!
あなたの回答
tips
プレビュー
