前提
うまく作動してくれません。どの部分が間違っているのかを教えて頂けないでしょうか。
[改訂新版]jQueryポケットリファレンス_サンプルコード_P95 より。
発生している問題・エラーメッセージ
Uncaught Error: Syntax error, unrecognized expression: lastname=田中<br> jQuery 13 jquery-3.6.0.min.js:2:13639 jQuery 13
該当のソースコード
HTML5
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" href="css/style.css"> 7</head> 8<body> 9 <div class="main"> 10 <div class="content"> 11 <form> 12 姓<br> 13 <input class="form-input" name="lastname" type="text"><br> 14 名<br> 15 <input class="form-input" name="firstname" type="text"><br> 16 メールアドレス<br> 17 <input class="form-input" name="email" type="text"><br> 18 電話番号<br> 19 <input class="form-input" name="phone" type="text"><br> 20 編集<br> 21 <select class="form-input" multiple name="job"> 22 <option value="">-----選択してください-----</option> 23 <option value="employee">会社員</option> 24 <option value="self-employee">自営業</option> 25 <option value="student">学生</option> 26 <option value="homemeker">主婦・主夫</option> 27 </select><br> 28 <button class="btn" name="submit" type="button">確認</button> 29 </form> 30 <div class="desc"></div> 31 </div><!-- .content --> 32 <div class="footer"> 33 <hr> 34 <p class="copyright">2019 xxx all rights reserved.</p> 35 </div> 36 </div><!-- .main --> 37 <script src="js/jquery-3.6.0.min.js"></script> 38 <script src="js/app.js"></script> 39</body> 40</html>
jQuery
1// 編集前 2jQuery(function($) { 3 4 $('.btn').on('click', function() { 5 $('form input:text').each(function() { 6 $('.desc').append(`${ $(this).attr('name') }=${ $(this).val() }<br>`); 7 }); 8 $('select option:selected').each(function() { 9 $('.desc').append(`${ $('select').attr('name')}=${ $(this).val() }<br>`); 10 }); 11 }); 12 13});
jQuery
1// 編集後 2jQuery(function($) { 3 4 $('.btn').on('click', function() { 5 $('form input:text').each(function() { 6 $(`${ $(this).attr('name') }=${ $(this).val() }<br>`).appendTo('.desc'); 7 }); 8 $('select option:selected').each(function() { 9 $(`${ $('select').attr('name')}=${ $(this).val() }<br>`).appendTo('.desc'); 10 }); 11 }); 12 13});

回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2023/01/12 10:41
2023/01/12 10:54