Q&A
「画面内の特定の要素が次、次...と変わっていく挙動」について、途中までできているのであればソースを提示ください。どういったタグで何をもって次なのかがよくわかりません
jQuery、もしくはJavaScriptで挙動を制御しようとしております。
やりたいこととしては、よくスマホゲーム等である画面のどこかしらをタップすると画面内の特定の要素が次、次...と変わっていく挙動をウェブサイトにて実装をさせたいと考えております。
最終的にはウェブサイトなので、最後まで行くと最初に戻る仕掛けを追加させ、ループで閲覧が可能な状態に持っていきたいと考えております。
クリックさせ、1番目の要素から2番目の要素に切り替えるところまでは問題なくいけたのですが、再度同じボタンをトリガーとして3番目以降のものを表示させていく方法がググってみたりしているのですが分からず苦心しております。
どなたかご存じの方ご教授いただけますと幸いです。
よろしくお願いいたします。
html5
1 <section id="fixedcontainer" class="pos-r"> 2 <!--- ↓このdivをクリックすることで以下のliに格納されている要素を順に出していくイメージです ---> 3 <div class="touch-area pos-a-area"></div> 4 <div class="story-wrapper pos-a-area"> 5 <ul> 6 <li class="s-section01 active"> 7 section01 8 </li> 9 <li class="s-section02"> 10 section02 11 </li> 12 <li class="s-section03"> 13 section03 14 </li> 15 <li class="s-section04"> 16 section04 17 </li> 18 </ul> 19 </div> 20 </section>
私の方で記述しているjsは下記になります。
javascript
1$(function() { 2 $('.touch-area').click(function(e){ 3 $('.s-section01').removeClass("active"); 4 $('.s-section02').addClass("active"); 5 return false; 6 }); 7});
ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
失礼いたしました、追記いたしました。
回答3件
0
ベストアンサー
s-sectionXXのようなユニークな名前をclassにつけるより
activeになる対象がなにかを同じclass（今回で言うs-section）を付けて管理したほうがいいでしょう
次を探して、見つからなければ先頭というロジックが簡単なやりかたですね
例えばこんな感じ
css
1.active{background-Color:lime;} 2
javascript
1$(function() { 2 $('.touch-area').on('click',function(e){ 3 var next=$('.s-section.active').next('.s-section'); 4 if(next.length==0) next=$('.s-section').eq(0); 5 $('.s-section.active').removeClass('active'); 6 next.addClass("active"); 7 }); 8});
html
1<section id="fixedcontainer" class="pos-r"> 2<!--- ↓このdivをクリックすることで以下のliに格納されている要素を順に出していくイメージです ---> 3<div class="touch-area pos-a-area">touch</div> 4<div class="story-wrapper pos-a-area"> 5<ul> 6<li class="s-section s-section01 active"> 7section01 8</li> 9<li class="s-section s-section02"> 10section02 11</li> 12<li class="s-section s-section03"> 13section03 14</li> 15<li class="s-section s-section04"> 16section04 17</li> 18</ul> 19</div> 20</section>
投稿2017/07/05 06:35
総合スコア114812
0
以下のように行ってみるのはどうでしょうか？
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 .touch-area { 8 background-color: #ff8ed0; 9 width: 50px; 10 height: 50px; 11 } 12 13 li { 14 display: none; 15 } 16 17 .active { 18 display: block; 19 } 20 </style> 21</head> 22<body> 23<section id="fixedcontainer" class="pos-r"> 24 <!--- ↓このdivをクリックすることで以下のliに格納されている要素を順に出していくイメージです ---> 25 <div class="touch-area pos-a-area"></div> 26 <div class="story-wrapper pos-a-area"> 27 <ul> 28 <li class="s-section01 active"> 29 section01 30 </li> 31 <li class="s-section02"> 32 section02 33 </li> 34 <li class="s-section03"> 35 section03 36 </li> 37 <li class="s-section04"> 38 section04 39 </li> 40 </ul> 41 </div> 42</section> 43<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 44<script> 45 $(function () { 46 var i = 1; 47 $('.touch-area').click(function (e) { 48 $('.s-section0' + i).removeClass("active"); 49 50 if (!$('.s-section0' + (i + 1)).length) { 51 i = 0; 52 } 53 54 $('.s-section0' + (i + 1)).addClass("active"); 55 i += 1; 56 return false; 57 }); 58 }); 59</script> 60</body> 61</html>
投稿2017/07/05 06:38
総合スコア14731
ありがとうございます！
'.s-section0' + (i + 1)というのは思いつきませんでした...。
勉強になりました！
ありがとうございました！
0
こんな感じでしょうか
JavaScript
1 let active = $('.story-wrapper.pos-a-area').find('.active').removeClass('active'); 2 let next = active.next(); 3 if (!next.length) { 4 next = active.parent().children(':first-child'); 5 } 6 7 next.addClass('active');
投稿2017/07/05 06:48
総合スコア13749
あなたの回答
tips
プレビュー
