Q&A
すみませんが、問題が良くわかりませんでした。
「正常には動く」、でも「うまくできない」「うまくまとまらない」とのことですが、
この「うまく」の部分をもう少し詳しく説明していただけますか。
前提・実現したいこと
Jqueryでの要素指定がうまく出来ません。
html、css、Jqueryを使って、指定したものだけをオーバーレイ表示させたいのですが、
jQueryの「this」や「before、after」が使いこなせなくてコードをうまく簡略化出来ません。
よろしくお願いします。
html
1<div class="main"> 2 <div class="haikei"> 3 <img src="../images/haikei.jpeg"> 4 <div class="main-tag"> 5 <div class="alltag tag-A"><p>AAA</p></div> 6 <div class="alltag tag-B"><p>BBB</p></div> 7 <div class="alltag tag-C"><p>CCC</p></div> 8 </div> 9 </div> 10 <div id="overlay-A"> 11 <div id="overlayWindow-A"> 12 <p>オーバーレイが表示されています</p> 13 <button id="buttonA">閉じる</button> 14 </div> 15 </div> 16 <div id="overlay-B"> 17 <div id="overlayWindow-B"> 18 <p>オーバーレイが表示されています</p> 19 <button id="buttonB">閉じる</button> 20 </div> 21 </div> 22 <div id="overlay-C"> 23 <div id="overlayWindow-C"> 24 <p>オーバーレイが表示されています</p> 25 <button id="buttonC">閉じる</button> 26 </div> 27 </div> 28 </div>
css
1.tag-A{ 2 background-image: linear-gradient(180deg, hsla(0, 0%, 45%, .1) 2rem, hsla(0, 100%, 100%, 0) 2.5rem) 3 , linear-gradient(180deg, hsla(0, 100%, 85%, 1), hsla(0, 100%, 85%, 1)); 4 margin-top: 100px; 5 margin-left: 150px; 6 transform: rotate(10deg); 7} 8.tag-B{ 9 background-image: linear-gradient(180deg, hsla(0, 0%, 45%, .1) 2rem 10 , hsla(0, 100%, 100%, 0) 2.5rem) 11 , linear-gradient(180deg, hsla(50, 100%, 85%, 1), hsla(50, 100%, 85%, 1)); 12 margin-top:200px; 13 margin-left:500px; 14 transform: rotate(0deg); 15} 16.tag-C{ 17 background-image: linear-gradient(180deg, hsla(0, 0%, 45%, .1) 2rem 18 , hsla(0, 100%, 100%, 0) 2.5rem) 19 , linear-gradient(180deg, hsla(100, 100%, 85%, 1), hsla(100, 100%, 85%, 1)); 20 margin-top:400px; 21 margin-left:250px; 22 transform: rotate(0deg); 23} 24#overlay-A { 25 width: 100%; 26 height: 100%; 27 position: fixed; 28 top: 0; 29 left: 0; 30 background: rgba(99, 99, 99, 0.7); 31 display: none; 32 z-index: 998; 33} 34#overlayWindow-A { 35 width: 30%; 36 height: 30%; 37 margin: 100px auto; 38 text-align: center; 39 border: 2px solid #0000FF; 40 background-color: hsla(0, 100%, 85%, 1); 41 display: none; 42 z-index: 999; 43} 44#overlay-B { 45 width: 100%; 46 height: 100%; 47 position: fixed; 48 top: 0; 49 left: 0; 50 background: rgba(99, 99, 99, 0.7); 51 display: none; 52 z-index: 998; 53} 54#overlayWindow-B { 55 width: 30%; 56 height: 30%; 57 margin: 100px auto; 58 text-align: center; 59 border: 2px solid #0000FF; 60 background-color: hsla(50, 100%, 85%, 1); 61 display: none; 62 z-index: 999; 63} 64#overlay-C { 65 width: 100%; 66 height: 100%; 67 position: fixed; 68 top: 0; 69 left: 0; 70 background: rgba(99, 99, 99, 0.7); 71 display: none; 72 z-index: 998; 73} 74#overlayWindow-C { 75 width: 30%; 76 height: 30%; 77 margin: 100px auto; 78 text-align: center; 79 border: 2px solid #0000FF; 80 background-color: hsla(100, 100%, 85%, 1); 81 display: none; 82 z-index: 999; 83}
jQuery
1$(function() { 2 $('.tag-A').on('click', function() { 3 $("#overlay-A, #overlayWindow-A").fadeIn(); 4 }); 5 $('#buttonA').on('click', function() { 6 $("#overlay-A, #overlayWindow-A").fadeOut(); 7 }); 8 }); 9 $(function() { 10 $('.tag-B').on('click', function() { 11 $("#overlay-B, #overlayWindow-B").fadeIn(); 12 }); 13 $('#buttonB').on('click', function() { 14 $("#overlay-B, #overlayWindow-B").fadeOut(); 15 }); 16 }); 17 $(function() { 18 $('.tag-C').on('click', function() { 19 $("#overlay-C, #overlayWindow-C").fadeIn(); 20 }); 21 $('#buttonC').on('click', function() { 22 $("#overlay-C, #overlayWindow-C").fadeOut(); 23 }); 24 });
補足情報
上のコードで正常には動きます。
「上のコードで正常には動きます」とのことですが、わからないことはなんですか？
表現するための言葉がわからない時は表現の仕方を工夫しましょう
https://teratail.com/help/question-tips#questionTips3-3-1
結果（実際に起きたこと）を書きましょう
https://teratail.com/help/question-tips#questionTips3-4-1
エラーメッセージや実行ログをコピー&ペーストしましょう
https://teratail.com/help/question-tips#questionTips3-4-2
期待した処理結果を書きましょう
https://teratail.com/help/question-tips#questionTips3-4-3
コードを簡素化したいということですか？
説明不足ですみません、jQuery等を使ってコードを簡略化したいです。
jQueryで「this」「before、after」が使いこなせなくてコードが簡略化できません。
HTMLを変更してもいいですか？
大丈夫です
回答1件
0
ベストアンサー
こんばんは。
html
1<div class="main"> 2 <div class="haikei"> 3 <img src="../images/haikei.jpeg"> 4 <div class="main-tag"> 5 <div class="alltag tag-A" data-for="overlay-A"> 6 <p>AAA</p> 7 </div> 8 <div class="alltag tag-B" data-for="overlay-B"> 9 <p>BBB</p> 10 </div> 11 <div class="alltag tag-C" data-for="overlay-C"> 12 <p>CCC</p> 13 </div> 14 </div> 15 </div> 16 <div id="overlay-A"> 17 <div id="overlayWindow-A"> 18 <p>オーバーレイが表示されています</p> 19 <button class="close" id="buttonA" data-for="overlay-A">閉じる</button> 20 </div> 21 </div> 22 <div id="overlay-B"> 23 <div id="overlayWindow-B"> 24 <p>オーバーレイが表示されています</p> 25 <button class="close" id="buttonB" data-for="overlay-B">閉じる</button> 26 </div> 27 </div> 28 <div id="overlay-C"> 29 <div id="overlayWindow-C"> 30 <p>オーバーレイが表示されています</p> 31 <button class="close" id="buttonC" data-for="overlay-C">閉じる</button> 32 </div> 33 </div> 34</div>
js
1$(function () { 2 $('.alltag').on('click', function () { 3 $( "#" + $(this).data('for') ).fadeIn(); 4 }); 5 $('.close').on('click', function () { 6 $( "#" + $(this).data('for') ).fadeOut(); 7 }); 8});
css
1#overlayWindow-A { 2 width: 30%; 3 height: 30%; 4 margin: 100px auto; 5 text-align: center; 6 border: 2px solid #0000FF; 7 background-color: hsla(0, 100%, 85%, 1); 8 /* display: none; 削除 */ 9 z-index: 999; 10} 11#overlayWindow-B { 12 width: 30%; 13 height: 30%; 14 margin: 100px auto; 15 text-align: center; 16 border: 2px solid #0000FF; 17 background-color: hsla(50, 100%, 85%, 1); 18 /* display: none; 削除 */ 19 z-index: 999; 20} 21#overlayWindow-C { 22 width: 30%; 23 height: 30%; 24 margin: 100px auto; 25 text-align: center; 26 border: 2px solid #0000FF; 27 background-color: hsla(100, 100%, 85%, 1); 28 /* display: none; 削除 */ 29 z-index: 999; 30}
投稿2020/11/26 08:59
総合スコア36928
あなたの回答
tips
プレビュー
