Q&A
ありがとうございます助かりました！
jquery を使い要素の追加削除をおこないたいです
html
1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>Document</title> 9 10 <style> 11 div { 12 padding: 0.5em 0.5em; 13 margin: 2em 3rem; 14 font-weight: bold; 15 border: solid 3px #000000; 16 } 17 .kanagata p { 18 margin: 0; 19 padding: 0; 20 } 21 </style> 22 23</head> 24 25<body> 26 27 <div class="main"> 28 <div class="kanagata"> 29 <p>たいやきマシーン</p> 30 <button class="ryousan">量産！</button> 31 </div> 32 </div> 33 34 35 <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script> 36 <script> 37 $(function() { 38 39 $(".ryousan").click(function() { 40 const taiyaki = $(document.createElement('div')); 41 $(taiyaki).addClass("taiyaki") 42 $(taiyaki).html('<p>おいしいたいやき！</p>'); 43 $(this).parent().before($(taiyaki)); 44 }); 45 46 const haikiBtn = $(document.createElement('div')); 47 $(haikiBtn).addClass("haiki").html("<button>廃棄…</button>"); 48 49 $('.main').on('mouseover', '.taiyaki' , function() { 50 $(this).append($(haikiBtn)); 51 }); 52 53 // ----------------------------------------------------- 54 $('.main').on('mouseout', '.taiyaki.haiki' , function() { 55 // ----------------------------------------------------- 56 $(haikiBtn).remove(); 57 }); 58 59 $('.main').on('click', ".haiki", function() { 60 $(this).parent().remove(); 61 }); 62 63 }); 64 </script> 65</body> 66</html>
余計な要素に乗ってるときはイベントを起こさないようにしたいです
各たいやきにボタンを追加、削除はできたのですが、他の要素（main内、かつtaiyaki外）に乗ってる時もボタンが残ってしまいます。こういう時はどうすればよいのでしょうか？
回答2件
0
jQuery
1 //①mouseover ⇒ mouseenter 2 $('.main').on('mouseenter', '.taiyaki' , function() { 3 $(this).append($(haikiBtn)); 4 }); 5 6 //②mouseout ⇒ mouseleave 7 //③.taiyaki.haiki ⇒ .taiyaki 8 $('.main').on('mouseleave', '.taiyaki' , function() { 9 //④haikiBtn ⇒ '.haiki' 10 $('.haiki').remove(); 11 });
php-gresさんのおっしゃる通り
表示・非表示を制御するクラスを定義した上でaddClass/removeClassした方がいいかと思いますが
提示いただいたソースで対応するなら①～④の変更で動くと思います。
投稿2022/01/17 07:17
総合スコア310
0
ベストアンサー
カラの要素を新規に作りたいのであれば、
jQuery
1const taiyaki = $(document.createElement('div'));
↓
jQuery
1const taiyaki = $('<div></div>');
が基本になるので、
jQuery
1 const taiyaki = $(document.createElement('div')); 2 $(taiyaki).addClass("taiyaki") 3 $(taiyaki).html('<p>おいしいたいやき！</p>'); 4 $(this).parent().before($(taiyaki));
↓
jQuery
1 const taiyaki = $('<div></div>', { 2 "class": "taiyaki", 3 }).html('<p>おいしいたいやき！</p>'); 4 $(this).parent().before(taiyaki);
で済むんじゃないかと思います。
実は、const taiyakiを定義すらせず、before()の中で無名関数のように書いてしまうこともできます。
↓
jQuery
1 $(this).parent().before($('<div></div>', { 2 "class": "taiyaki", 3 }).html('<p>おいしいたいやき！</p>'));
（動作確認はできていませんが、まずはお試しください。）
余談ですが、動的要素が少ないのであれば、
表示・非表示を制御するクラスを定義した上で
addClass/removeClassした方がいいかと思います。
投稿2022/01/17 07:08
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/01/17 07:53