Q&A
画像のように、全員、グループ、メンバーボタン押下で、
モーダル画面がポップアップし、グループ、メンバー、を選択、登録すると、
元の画面にグレー色のタグが表示される画面を作りたいです。
タグの消去は出来るのですが、タグの追加が出来ません。
何か良いサイトか、下記のタグで、バグがわかれば、教えて頂きたいです。
説明](be8a1a44d98994185b4ced3c40bd3ffd.jpeg)](a132c5efe1d5d8d3318db95278e11640.jpeg)
■html
<!DOCTYPE html> <html lang="JP"> <head> <script type="text/javascript" src="js/common.js"></script> <script type="text/javascript">head();</script> </head> <body> <div class="container"> <form id="edit-news"> <div class="display-flex"> <div class="btn-3group"> <button type="button" class="btn btn-member"> <span class="glyphicon glyphicon-ok-sign"></span> <span class="button-font">全員</span> </button> </div> <div class="btn-3group"> <button type="button" class="btn btn-member" data-toggle="modal" data-target="#modal-group" data-backdrop="static"> <span class="glyphicon glyphicon-ok-sign"></span> <span class="button-font">グループ</span> </button> </div> <div class="btn-3group"> <button type="button" class="btn btn-member" data-toggle="modal" data-target="#modal-member" data-backdrop="static"> <span class="glyphicon glyphicon-ok-sign"></span> <span class="button-font">メンバー</span> </button> </div> </div> <!--消去用にbuttonにmemberName + n を設定--> <div id="setMember"> <label class="label label-default" id="a000001" var="a000001" name="assignMember">全員<span class="glyphicon glyphicon-remove" aria-hidden="true"></span></label> <label class="label label-default" id="g440002" var="g440002" name="assignMember">1年生<span class="glyphicon glyphicon-remove" aria-hidden="true"></span></label> <label class="label label-default" id="g001023" var="g001023" name="assignMember">2年生<span class="glyphicon glyphicon-remove" aria-hidden="true"></span></label> <label class="label label-default" id="c556644" var="c556699" name="assignMember">山田 太郎<span class="glyphicon glyphicon-remove" aria-hidden="true"></span></label> <label class="label label-default" id="f334455" var="f334455" name="assignMember">佐藤 一郎<span class="glyphicon glyphicon-remove" aria-hidden="true"></span></label> <label class="label label-default" id="m223366" var="m223344" name="assignMember">鈴木 京子<span class="glyphicon glyphicon-remove" aria-hidden="true"></span></label> </div> <!---------------------------- modal --------------------------------> <!--modal-group--> <div id="modal-group" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">グループを選択して下さい</h4> </div> <div class="modal-body" style="margin:0px 15px; font-size:24px;"> <div class="checkbox"> <label> <input type="checkbox" value=""> 1年生グループ </label> </div> <div class="checkbox"> <label> <input type="checkbox" value=""> 2年生グループ </label> </div> </div> <div class="modal-footer"> <!-- 登録ボタン --> <div class="center"> <div class="submit center-btn-max"> <input type="reset" class="btn btn-default btn-default" value="キャンセル" data-dismiss="modal"/> <input type="button" class="btn btn-primary" value="登録" data-dismiss="modal"/> </div> </div> </div> </div> </div> </div> <!--modal-member--> <div id="modal-member" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">メンバーを選択して下さい</h4> </div> <div class="modal-body" style="margin:0px 15px; font-size:24px;"> <div class="checkbox"> <label> <input type="checkbox" value=""> 田中 太郎 </label> </div> <div class="checkbox"> <label> <input type="checkbox" value=""> 佐藤 次郎 </label> </div> </div> <div class="modal-footer"> <!-- 登録ボタン --> <div class="center"> <div class="submit center-btn-max"> <input type="reset" class="btn btn-default btn-default" value="キャンセル" data-dismiss="modal"/> <input type="button" class="btn btn-primary" value="登録" data-dismiss="modal"/> </div> </div> </div> </div> </div> </div> <!-- /container --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script type="text/javascript" src="js/common.js"></script> </body> </html>
■JS
/* header */ function head() { var html = ""; html += '<meta charset="utf-8">'; html += '<meta name="viewport" content="width=device-width, initial-scale=1.0">'; html += '<meta name="description" content="">'; html += '<meta name="author" content="">'; html += '<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">'; html += '<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>'; html += '<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>'; html += '<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>'; html += '<script type="text/javascript" src="./js/common.js"></script>'; html += '<link href="./css/common.css" rel="stylesheet">'; html += '<link href="./css/font-awesome.min.css" rel="stylesheet">'; document.write(html); } /* footer */ function footer() { var html = ""; html += '<div id=footer>'; html += '</div>'; document.write(html); } /* xクリックでメンバー追加*/ /*全員*/ $('#allMember').click(function () { if (document.getElementsByTagName('#setMember') != null) { var all = '<label class="label label-default" id="a000001" var="" name="assignMember">全員<span class="glyphicon glyphicon-remove" aria-hidden="true"></span></label>'; $('#setMember').prepend(all); } }); /*group*/ $('#groupSubmit').click(function () { // 各値を入れるオブジェクト var glp = new Object(); // チェックされた値を取得（チェックボックス・ラジオボタン） // $("#groupCheckbox input:checked").each(function () { // glp[this.name] = this.value // }); $('#groupCheckbox .checkbox input:checked').map(function () { glp = $(this).val(); }); // 結果表示 for (var key in glp) { alert(glp[key]); } }); /* xクリックでメンバー消去*/ $("div#setMember label span").click(function () { memberIndex = '#' + $(this).parent().attr('id'); alert(memberIndex); if (memberIndex != null) { $(memberIndex).remove(); } });
回答1件
0
getElementsByTagName()はタグ名で要素を取得するので、IDのセレクタ指定してはダメです。
投稿2016/03/14 11:47
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。