Q&A
何が分からないのか分からないですね。
現在のコードから1も4取得できているのに。だから表示の仕方だけの回答がついています。
ご自身でご自身のコードをどれくらい理解できているのでしょうか。
以下のコードで画像のような状態になります。画像を押すと分子が変わります。その挙動については問題ありません。
問題は分数の表示が画像の上にこないことです。重ねて表示されるようにz-indexをつけていますが、cssのleftの数値を変更しても画像と重なってくれません。
HTML
1<html> 2 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1"> 6 <meta http-equiv="x-ua-compatible" content="IE=edge"> 7 <title>5-01_countdown</title> 8 <link rel="stylesheet" href="css.css"> 9 <script src="../Shopping/jquery-3.3.1.min.js"></script> 10</head> 11 12<body> 13 14 <div class="slide-wrapper"> 15 16 <ul class="slides"> 17 <li class="slide active"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/spring.jpg"><span class="page"></span></li> 18 <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/rainy.jpg"><span class="page"></span></li> 19 <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/autumn.jpg"><span class="page"></span></li> 20 <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/winter.jpg"><span class="page"></span></li> 21 </ul> 22 23 </div> 24 <script type="text/javascript" src="script.js"></script> 25</body> 26 27</html>
JS
1$(function() { 2 $('.slide').click(function() { 3 $('.active').removeClass('active'); 4 5 var clickedIndex = $('.slide').index($(this)) + 1; 6 var page = clickedIndex + '/' + $('.slide').length; 7 8 if ($('.slide').length == clickedIndex) { 9 $('.slide').eq(0).addClass('active'); 10 } else { 11 $('.slide').eq(clickedIndex).addClass('active'); 12 } 13 $('.page').text(page); 14 // $(".page").text("変更後の文章"); 15 }); 16});
CSS
1.slides { 2 padding: 0; 3} 4 5.slide { 6 display: none; 7 position: relative; 8 z-index: 0; 9} 10 11.slide span { 12 position: absolute; 13 top: 0; 14 left: 70; 15 z-index: 10; 16} 17
HTMLが入れ子になっていますが、どういうことなのでしょうか？
とりあえず
1. 未解決を２桁にするべからず
※ 質問５７、未解決１５
2. 同じ質問を投稿しない
※ 2つのセレクトボックスの連動方法（６質問（うち質問でない２つ））
3. マイナスがついたからって重複投稿をしてマイナスがついた質問を削除依頼をしない
ぐらいだな
回答1件
0
ベストアンサー
下記でどうでしょうか？
html
1<li class="slide active"> 2 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/spring.jpg"> 3 <span>1/4</span> 4</li>
css
1 .slide { 2 position: relative; 3 } 4 .slide span { 5 position: absolute; 6 top: 0; 7 left: 0; 8 }
投稿2019/01/17 15:04
総合スコア955
ありがとうございます。
分母の数と、分子の数はJQueryから渡すものだと漠然と思っておりましたが違うのでしょうか。
ちなみに画像の数はDBとPHPを使いますので,
今の所は1以上5以下となってます。
lengthで要素の総数出して、indexで何番目か出してください。
表示はjqyeryでもphpでも可能です。
ありがとうございます。表示の仕方はわかりましたが、表示されませんので質問を編集いたします。
htmlに.pageが見つけれないのですが。。。あります？
あ、ごめんなさい。ありました。
.slideをクリックで表示されますが？
質問文に問題がありました。
ページ数を表示したいのですが、何も表示されません
もしかして画面が真っ白という意味ですか？
ありがとうございます。
spanタグの中に、1/4のようにページ数を表示させたいのですが、それが表示されません。
画像、画像の切り替えは問題ありません。
では、.slideをクリックしても表示されないという事ですか？
ありがとうございます。本日また確認しました。表示はされれています。(キャッシュの問題だったようです。)
まだ未解決の部分がありますので質問を編集し、投稿します。
単位が無いです。
safari使ってないのでどうなのか分かりませんが、
デベロッパでcssの記述ミスって確認できないのです？
ちなみに、chromeは確認できます。
確認しましたが、spanが浮き出てしまっている状態です。
ごめんなさい。
現状確認させてください。
leftの数値を変更してspanが右に動けば想定通りになって問題解決なのですよね？
leftの数値を変更してspanが右に動くようになりましたか？
leftの数値を変更してspanが右に動くようになったけど、
spanが浮き出てしまっているという問題が発生したのです？
ありがとうございます。
leftの数値を変更してspanが画像と重なるようにしたいです。
画像の上にくるような値にしてもspanが動きません。
しかし明らかに画像を右に超えるような値にすると画像の右に表示されます。
画像を避けたような挙動をします。
ありがとうございます。何もいじってないですが、うまくいけました。
解決したようで良かったです。
あなたの回答
tips
プレビュー
