Q&A
typo指摘。詳細03 の src 閉じ忘れです。
「ポップアップモードル」と「カルーセル」を合わせた動作を、同ページに複数設定してたい。
動作の説明をすると、
ボタンリストが1つあり、リストをクリックすると、ボタンリストと連動する説明リストのモーダルが表示される。
表示されたモーダルの左右には「prev」「next」ボタンがあり、
モーダル表示のまま、カルーセルのように、説明リストが切り替わる。
ボタンリスト1つと説明リスト1つで実装が出来た！
後は、複製するだけ！と思ったら・・
・ボタンリストと説明リスト、2つ目以降の動作がおかしくなってしまった。
・「prev」「next」ボタンの表示非表示もうまくいかなくなってしまった。
上記2つの解決方法を誰か教えてください！
ボタンリスト1つと説明リスト1つで実装出来た、ソースコード
読み込みファイルは、次の二つ
<link href="https://meyerweb.com/eric/tools/css/reset/reset200802.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
その他、記述は以下の通り
HTML
1<div id="contents"> 2 <!-- ボタンリスト --> 3 <ul class="slider_list clearfix"> 4 <li> 5 <a href="#c2_t1"><img src="https://placehold.jp/cccccc/000000/300x150.png?text=詳細01" alt=""></a> 6 </li> 7 <li> 8 <a href="#c2_t2"><img src="https://placehold.jp/cccccc/000000/300x150.png?text=詳細02" alt=""></a> 9 </li> 10 <li> 11 <a href="#c2_t3"><img src="https://placehold.jp/cccccc/000000/300x150.png?text=詳細03 alt=""></a> 12 </li> 13 </ul> 14 15 <!-- モーダル＆説明リスト --> 16 <div class="slider_area"> 17 <div class="slider-prev">prev</div> 18 <div class="slider-next">next</div> 19 <div class="slider"><ul class="clearfix"> 20 <li id="c2_t1"> 21 <div class="close">×</div> 22 <img src="https://placehold.jp/cccccc/000000/300x150.png?text=テスト01" alt=""> 23 <p style="height:500px;">テキストテキストテキストテキスト</p> 24 </li> 25 <li id="c2_t2"> 26 <div class="close">×</div> 27 <img src="https://placehold.jp/cccccc/000000/300x150.png?text=テスト02" alt=""> 28 <p style="height:300px;">テキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキスト</p> 29 </li> 30 <li id="c2_t3"> 31 <div class="close">×</div> 32 <img src="https://placehold.jp/cccccc/000000/300x150.png?text=テスト03" alt=""> 33 <p style="height:500px;">テキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキスト</p> 34 </li> 35 </ul></div> 36 </div> 37 38</div>
css
1.contents{ 2 width: 1000px; 3 margin: 0 auto; 4} 5.contents ul li img{ 6 width: 100%; 7 height: auto; 8} 9.contents .slider_list{ 10 overflow: hidden; 11} 12.contents .slider_list li{ 13 width: 300px; 14 float: left; 15 padding: 0 10px 10px; 16} 17.contents .slider_area{ 18 display: none; 19 position: fixed; 20 top: 0; 21 left: 0; 22 z-index: 5; 23 background: rgba(0,0,0,0.5); 24 width: 100%; 25 height: 100%; 26 overflow: auto; 27} 28.contents .slider_area .slider-prev, 29.contents .slider_area .slider-next{ 30 width: 20px; 31 font-size: 20px; 32 font-weight: bold; 33 color: #fff; 34 position: fixed; 35 top: 50%; 36 transform: rotateY(-50%); 37 z-index: 10; 38 cursor: pointer; 39} 40.contents .slider_area .slider-prev{ 41 left: 50px; 42} 43.contents .slider_area .slider-next{ 44 right: 50px; 45} 46.contents .slider_area .slider_box{ 47 width: 500px; 48 margin: 0 auto; 49} 50.contents .slider_area .slider{ 51 width: 500px; 52 margin: 0 auto; 53 padding: 30px 0; 54} 55.contents .slider_area .slider ul{ 56 background: #fff; 57} 58.contents .slider_area .slider ul li{ 59 padding: 0; 60 float: left; 61 display: none; 62 width: 100%; 63 position: relative; 64 z-index: 15; 65} 66.contents .slider_area .slider ul li .close{ 67 position: absolute; 68 right: -10px; 69 top: -10px; 70 z-index: 20; 71 font-size: 20px; 72 width: 20px; 73 height: 20px; 74 background: #ccc; 75} 76.contents .slider_area .slider ul li .close:hover{ 77 opacity: 0.7; 78} 79
js
1$(function() { 2 clickMotion(); 3 modalContents(); 4}); 5 6// click motion 7function clickMotion(){ 8 $('a[href^=#]').click(function(){ 9 var href= $(this).attr("href"); 10 var target = $(href == "#" || href == "" ? 'html' : href); 11 var position = target.offset().top; 12 $("html, body").animate({scrollTop:position}, 500, "swing"); 13 return false; 14 }); 15} 16 17// modal & slider 18function modalContents(){ 19 // モーダルを開く 20 $('contents .slider_list li a[href^=#]').click(function(){ 21 var href= $(this).attr("href"); 22 $(href).addClass("view").fadeIn(); 23 $(href).parents(".slider_area").fadeIn(); 24 $("body").css("overflow","hidden"); 25 motion01(); 26 return false; 27 }); 28 // モーダルを閉じる 29 $('contents .slider_area .close').click(function(){ 30 $('.slider ul li').removeClass("view").fadeOut(); 31 $(this).parents(".slider_area").fadeOut(); 32 $("body").css("overflow","auto"); 33 motion01(); 34 return false; 35 }); 36 37 // 前へボタンが押されたとき 38 $('.slider-prev').click(function(){ 39 var number = $('.view').index('.slider ul li'); 40 $('.slider ul li').removeClass("view").css("display","none"); 41 $('.slider ul li:nth-of-type('+number+')').addClass("view").css("display","block"); 42 motion01(); 43 }); 44 // 次へボタンが押されたとき 45 $('.slider-next').click(function(){ 46 var number = $('.view').index('.slider ul li')+2; 47 $('.slider ul li').removeClass("view").css("display","none"); 48 $('.slider ul li:nth-of-type('+number+')').addClass("view").css("display","block"); 49 motion01(); 50 }); 51 52 // 「prev」「next」ボタンの表示切り替え 53 function motion01(){ 54 if($('.slider ul li:first-of-type').hasClass("view")){ 55 $('.slider-prev').css("display","none"); 56 } else { 57 $('.slider-prev').css("display","block"); 58 } 59 if($('.slider ul li:last-of-type').hasClass("view")){ 60 $('.slider-next').css("display","none"); 61 } else { 62 $('.slider-next').css("display","block"); 63 } 64 } 65 66} 67
上記のコードに「ボタンリスト」と「説明リスト」を複製したら、動作がおかしくなった。
HTML以外は変更なし。
HTML
1<div id="contents"> 2 <!-- ボタンリスト --> 3 <ul class="slider_list clearfix"> 4 <li> 5 <a href="#c2_t1"><img src="https://placehold.jp/cccccc/000000/300x150.png?text=詳細01" alt=""></a> 6 </li> 7 <li> 8 <a href="#c2_t2"><img src="https://placehold.jp/cccccc/000000/300x150.png?text=詳細02" alt=""></a> 9 </li> 10 <li> 11 <a href="#c2_t3"><img src="https://placehold.jp/cccccc/000000/300x150.png?text=詳細03" alt=""></a> 12 </li> 13 <li> 14 <a href="#c2_t4"><img src="https://placehold.jp/cccccc/000000/300x150.png?text=詳細04" alt=""></a> 15 </li> 16 <li> 17 <a href="#c2_t5"><img src="https://placehold.jp/cccccc/000000/300x150.png?text=詳細05" alt=""></a> 18 </li> 19 </ul> 20 21 <!-- モーダル＆説明リスト --> 22 <div class="slider_area"> 23 <div class="slider-prev">prev</div> 24 <div class="slider-next">next</div> 25 <div class="slider"><ul class="clearfix"> 26 <li id="c2_t1"> 27 <div class="close">×</div> 28 <img src="https://placehold.jp/cccccc/000000/300x150.png?text=テスト01" alt=""> 29 <p style="height:500px;">テキストテキストテキストテキスト</p> 30 </li> 31 <li id="c2_t2"> 32 <div class="close">×</div> 33 <img src="https://placehold.jp/cccccc/000000/300x150.png?text=テスト02" alt=""> 34 <p style="height:300px;">テキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキスト</p> 35 </li> 36 <li id="c2_t3"> 37 <div class="close">×</div> 38 <img src="https://placehold.jp/cccccc/000000/300x150.png?text=テスト03" alt=""> 39 <p style="height:500px;">テキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキスト</p> 40 </li> 41 <li id="c2_t4"> 42 <div class="close">×</div> 43 <img src="https://placehold.jp/cccccc/000000/300x150.png?text=テスト04" alt=""> 44 <p style="height:500px;">テキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキスト</p> 45 </li> 46 <li id="c2_t5"> 47 <div class="close">×</div> 48 <img src="https://placehold.jp/cccccc/000000/300x150.png?text=テスト05" alt=""> 49 <p style="height:500px;">テキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキスト</p> 50 </li> 51 </ul></div> 52 </div> 53 54 <!-- ボタンリスト --> 55 <ul class="slider_list clearfix"> 56 <li> 57 <a href="#c3_t1"><img src="https://placehold.jp/cccccc/000000/300x150.png?text=詳細06" alt=""></a> 58 </li> 59 <li> 60 <a href="#c3_t2"><img src="https://placehold.jp/cccccc/000000/300x150.png?text=詳細07" alt=""></a> 61 </li> 62 <li> 63 <a href="#c3_t3"><img src="https://placehold.jp/cccccc/000000/300x150.png?text=詳細08" alt=""></a> 64 </li> 65 </ul> 66 67 <!-- モーダル＆説明リスト --> 68 <div class="slider_area"> 69 <div class="slider-prev">prev</div> 70 <div class="slider-next">next</div> 71 <div class="slider"><ul class="clearfix"> 72 <li id="c3_t1"> 73 <div class="close">×</div> 74 <img src="https://placehold.jp/cccccc/000000/300x150.png?text=テスト06" alt=""> 75 <p style="height:200px;">テキストテキストテキストテキスト</p> 76 </li> 77 <li id="c3_t2"> 78 <div class="close">×</div> 79 <img src="https://placehold.jp/cccccc/000000/300x150.png?text=テスト07" alt=""> 80 <p style="height:200px;">テキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキスト</p> 81 </li> 82 <li id="c3_t3"> 83 <div class="close">×</div> 84 <img src="https://placehold.jp/cccccc/000000/300x150.png?text=テスト08" alt=""> 85 <p style="height:500px;">テキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキスト</p> 86 </li> 87 </ul></div> 88 </div> 89 90</div> 91
どのように修正したら、
「ポップアップモードル」と「カルーセル」を合わせた動作を、同ページに複数設定できますか？
typo、c2_t5 が閉じ忘れです。
動かしてみましたが、「2つ目以降の動作がおかしくなってしまった」がどこの部分か分かりませんでした。具体的にお願いします。
Lhankor_Mhyさん ご指摘ありがとうございます。c2_t5 が閉じ忘れは、投稿する際に誤って消してしまた部分でした。投稿を修正しました。
Lhankor_Mhyさん 「2つ目以降の動作がおかしくなってしまった」について。
2つ目のボタンリストをクリックすると、連動する説明リストのモーダルが表示されます。その後、モーダル左右の「prev」「next」ボタンをクリックすると、説明部分に当たるコンテンツが消えてしまいます。
これが1つめの問題点です。
「「prev」「next」ボタンの表示非表示もうまくいかなくなってしまった。」について。
これは、2つ目のボタンリストと説明リストを追記した後、1つ目のボタンリストをクリック。その後、モーダル左右の「next」ボタンをクリックすると、3つ目で「next」ボタンが消えてしまう。これが2つ目の問題点です。
わかりにくい説明ですが、よろしくおねがいします。
詳細03 の src 閉じ忘れが直っていないようでした。
↑元のソースの方です。
『説明部分に当たるコンテンツが消えてしまいます』←再現しませんでした。http://jsfiddle.net/Lhankor_Mhy/xpvt214o/943301/
回答1件
0
各指定のcontentsについてですが、
html ではidに、cssではクラスに、jsにおいては、「#」も「.」もないので、提示コードでは、問題部分どころか「出来た」と仰っている部分の動作確認もできません・・・
せめて、できたところまでは動くものを提示すべきかと;;
どのように修正したら、
「ポップアップモードル」と「カルーセル」を合わせた動作を、同ページに複数設定できますか？
例えば
$('.slider ul li')
これで取得されるのは、id="c2_t1" ～ id="c3_t3"までの計８つの<li>です。
でも、
１つ目の.slider_areaを制御している間は、c3_*の３つは不要、
２つ目の.slider_areaを制御している間は、c2_*の５つは不要
ですよね？
全体的に、こういった「余計なもの」も含めた状態で、処理していることがうまくいかない原因かと思います。
制御したい範囲だけを取得できるようセレクタが書ければ、「複数」の場合もそれぞれで想定通りに動くようになりますよ。
投稿2018/11/19 08:50
総合スコア1910
あなたの回答
tips
プレビュー
