質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

351閲覧

複数タブメニュー毎に配置しているもっと見るボタンの作動について

nyankoro0220

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2023/05/16 13:15

実現したいこと

複数クリック型のタブメニュー毎に画像が配置されている各々のもっと見るボタンの作動。

前提

お世話になります。複数(3つ)のクリック型タブメニュー毎に画像が配置されていて、
それぞれ、もっと見るボタンが付いているのですが、上手く動作せず、
もっと見るボタンが最後の画像まで表示されてからタブの回数分(3回)クリックしないと消えない現象が発生して、
HTMLのクラス名、id名を変更し、jQueryをそれぞれのクラス分同じ記述をし、ソースのように記述したら正常に動作したのですが、
これが正しい方法なのでしょうか?
もしくは他にも方法があったりするのでしょうか?

何卒どうかアドバイスのほどよろしくお願い致します。

該当のソースコード

HTML

1 2<!DOCTYPE html> 3<html lang="ja" class="html"> 4 5<head> 6 <meta charset="utf-8" /> 7 <link rel="stylesheet" href="css/style.css" /> 8 <script src="js/jquery-3.6.0.min.js"></script> 9 <script src="js/script.js"></script> 10</head> 11 12<body class="all preload" id="to_top"> 13 <header> 14 </header> 15 <section class="photo" id="photo"> 16 <div class="container"> 17 <h2>_Photo</h2> 18 <div class="tab-wrapper"> 19 <ul class="tab"> 20 <li><a href="#a-area">a</a></li> 21 <li><a href="#b-area">b</a></li> 22 <li><a href="#c-area">c</a></li> 23 </ul> 24 </div> 25 26 <article class="a-box area" id="a-area"> 27 <ul class="flex flex-photo"> 28 <li class="a-item"><a href="#"><img src="./img/photo_01.png" alt=""></a></li> 29 <li class="a-item"><a href="#"><img src="./img/photo_01.png" alt=""></a></li> 30 <li class="a-item"><a href="#"><img src="./img/photo_01.png" alt=""></a></li> 31 <li class="a-item"><a href="#"><img src="./img/photo_01.png" alt=""></a></li> 32 <li class="a-item"><a href="#"><img src="./img/photo_01.png" alt=""></a></li> 33 <li class="a-item"><a href="#"><img src="./img/photo_01.png" alt=""></a></li> 34 <li class="a-item"><a href="#"><img src="./img/photo_01.png" alt=""></a></li> 35 <li class="a-item"><a href="#"><img src="./img/photo_01.png" alt=""></a></li> 36 <li class="a-item"><a href="#"><img src="./img/photo_01.png" alt=""></a></li> 37 <li class="a-item"><a href="#"><img src="./img/photo_01.png" alt=""></a></li> 38 <li class="a-item"><a href="#"><img src="./img/photo_01.png" alt=""></a></li> 39 </ul> 40 <div class="more-btn"> 41 <button>もっと見る</button> 42 </div> 43 </article> 44 45 <article class="b-box area" id="b-area"> 46 <ul class="flex flex-photo"> 47 <li class="b-item"><a href="#"><img src="./img/photo_01.png" alt=""></a></li> 48 <li class="b-item"><a href="#"><img src="./img/photo_01.png" alt=""></a></li> 49 <li class="b-item"><a href="#"><img src="./img/photo_01.png" alt=""></a></li> 50 <li class="b-item"><a href="#"><img src="./img/photo_01.png" alt=""></a></li> 51 <li class="b-item"><a href="#"><img src="./img/photo_01.png" alt=""></a></li> 52 <li class="b-item"><a href="#"><img src="./img/photo_01.png" alt=""></a></li> 53 <li class="b-item"><a href="#"><img src="./img/photo_01.png" alt=""></a></li> 54 <li class="b-item"><a href="#"><img src="./img/photo_01.png" alt=""></a></li> 55 <li class="b-item"><a href="#"><img src="./img/photo_01.png" alt=""></a></li> 56 <li class="b-item"><a href="#"><img src="./img/photo_01.png" alt=""></a></li> 57 <li class="b-item"><a href="#"><img src="./img/photo_01.png" alt=""></a></li> 58 </ul> 59 <div class="more-btn"> 60 <button>もっと見る</button> 61 </div> 62 </article> 63 64 <article class="c-box area" id="c-area"> 65 <ul class="flex flex-photo"> 66 <li class="c-item"><a href="#"><img src="./img/photo_01.png" alt=""></a></li> 67 <li class="c-item"><a href="#"><img src="./img/photo_01.png" alt=""></a></li> 68 <li class="c-item"><a href="#"><img src="./img/photo_01.png" alt=""></a></li> 69 <li class="c-item"><a href="#"><img src="./img/photo_01.png" alt=""></a></li> 70 <li class="c-item"><a href="#"><img src="./img/photo_01.png" alt=""></a></li> 71 <li class="c-item"><a href="#"><img src="./img/photo_01.png" alt=""></a></li> 72 <li class="c-item"><a href="#"><img src="./img/photo_01.png" alt=""></a></li> 73 <li class="c-item"><a href="#"><img src="./img/photo_01.png" alt=""></a></li> 74 <li class="c-item"><a href="#"><img src="./img/photo_01.png" alt=""></a></li> 75 <li class="c-item"><a href="#"><img src="./img/photo_01.png" alt=""></a></li> 76 <li class="c-item"><a href="#"><img src="./img/photo_01.png" alt=""></a></li> 77 </ul> 78 <div class="more-btn"> 79 <button>もっと見る</button> 80 </div> 81 </article> 82 83 </div> 84 </section> 85</body> 86 87</html> 88

CSS

1@charset "UTF-8"; 2/* _photo */ 3.photo { 4 padding-top: 80px; 5 margin-bottom: 280px; 6} 7 8.photo h2 { 9 font-size: 36px; 10 font-weight: 500; 11 padding-bottom: 160px; 12} 13 14.flex { 15 display: flex; 16 justify-content: space-between; 17} 18 19.flex-photo { 20 flex-wrap: wrap; 21 margin-bottom: 20px; 22} 23 24.flex-photo li { 25 width: 30%; 26 margin-bottom: 50px; 27} 28 29.flex-photo li a { 30 transition: all 0.5s; 31} 32 33.flex-photo li a:hover { 34 opacity: 0.5; 35} 36 37.more-btn { 38 text-align: center; 39} 40 41.more-btn button { 42 color: #ffffff; 43 background-color: #5E5E5E; 44 font-size: 18px; 45 font-weight: 400; 46 padding: 14px 100px; 47 border: none; 48 cursor: pointer; 49 transition: all 0.5s; 50} 51 52.more-btn button:hover { 53 opacity: 0.5; 54} 55 56.a-item, .b-item, .c-item { 57 opacity: 1; 58} 59 60.a-item.is-hidden, .b-item.is-hidden, .c-item.is-hidden { 61 opacity: 0; 62 height: 0; 63 margin: 0; 64 display: none; 65} 66 67/*Tabボタン作成*/ 68.tab { 69 display: flex; 70 flex-wrap: wrap; 71} 72 73.tab li a { 74 display: block; 75 background: #ddd; 76 margin: 0 2px; 77 padding: 10px 20px; 78 transition: all 0.5s; 79} 80 81.tab li a:hover { 82 opacity: 0.5; 83} 84 85.tab li.active a { 86 background: #fff; 87} 88 89.area { 90 display: none; /*はじめは非表示*/ 91 opacity: 0; /*透過0*/ 92 background: rgb(255, 255, 255); 93 padding: 50px 20px; 94} 95 96.area.is-active { 97 display: block; /*表示*/ 98 animation-name: displayAnime; /*ふわっと表示させるためのアニメーション*/ 99 animation-duration: 2s; 100 animation-fill-mode: forwards; 101} 102 103@keyframes displayAnime { 104 from { 105 opacity: 0; 106 } 107 to { 108 opacity: 1; 109 } 110} 111

JavaScript

1// ロード、リロード時のtransitionを無効 2$(window).on('load', function () { 3 $('body').removeClass('preload'); 4}); 5 6$(function () { 7 /* ここには、表示するリストの数を指定します。 */ 8 var moreNum = 9; 9 10 /* 表示するリストの数以降のリストを隠しておきます。 */ 11 // nth-child (n+10)で10番目以降を~するとなるので。 12 // 『'+(文字列)+'』で囲うのは文字列だから。 13 $('.a-item:nth-child(n + ' + (moreNum + 1) + ')').addClass('is-hidden'); 14 $('.b-item:nth-child(n + ' + (moreNum + 1) + ')').addClass('is-hidden'); 15 $('.c-item:nth-child(n + ' + (moreNum + 1) + ')').addClass('is-hidden'); 16 17 /* 全てのリストを表示したら「もっとみる」ボタンをフェードアウトします。 */ 18 // 「もっと見る」をクリックしたら、非表示になっている項目の頭から9件だけ表示する 19 // slice(0, moreNum)は9件目までを取得するには配列のsliceメソッドを使用。 20 // sliceは、配列の0から9での要素をコピーして新しい配列を返すメソッド 21 $('.a-box .more-btn').on('click', function () { 22 $('.a-item.is-hidden').slice(0, moreNum).removeClass('is-hidden'); 23 if ($('.a-item.is-hidden').length == 0) { 24 $('.a-box .more-btn').fadeOut(); 25 } 26 }); 27 $('.b-box .more-btn').on('click', function () { 28 $('.b-item.is-hidden').slice(0, moreNum).removeClass('is-hidden'); 29 if ($('.b-item.is-hidden').length == 0) { 30 $('.b-box .more-btn').fadeOut(); 31 } 32 }); 33 $('.c-box .more-btn').on('click', function () { 34 $('.c-item.is-hidden').slice(0, moreNum).removeClass('is-hidden'); 35 if ($('.c-item.is-hidden').length == 0) { 36 $('.c-box .more-btn').fadeOut(); 37 } 38 }); 39 //Tabメニューの設定 40 //任意のタブにURLからリンクするための設定 41 function GethashID(hashIDName) { 42 if (hashIDName) { 43 //タブ設定 44 $('.tab li').find('a').each(function () { //タブ内のaタグ全てを取得 45 var idName = $(this).attr('href'); //タブ内のaタグのリンク名(例)#lunchの値を取得 46 if (idName == hashIDName) { //リンク元の指定されたURLのハッシュタグ(例)http://example.com/#lunch←この#の値とタブ内のリンク名(例)#lunchが同じかをチェック 47 var parentElm = $(this).parent(); //タブ内のaタグの親要素(li)を取得 48 $('.tab li').removeClass("active"); //タブ内のliについているactiveクラスを取り除き 49 $(parentElm).addClass("active"); //リンク元の指定されたURLのハッシュタグとタブ内のリンク名が同じであれば、liにactiveクラスを追加 50 //表示させるエリア設定 51 $(".area").removeClass("is-active"); //もともとついているis-activeクラスを取り除き 52 $(hashIDName).addClass("is-active"); //表示させたいエリアのタブリンク名をクリックしたら、表示エリアにis-activeクラスを追加 53 } 54 }); 55 } 56 } 57 58 //タブをクリックしたら 59 $('.tab a').on('click', function () { 60 var idName = $(this).attr('href'); //タブ内のリンク名を取得 61 GethashID(idName); //設定したタブの読み込みと 62 return false; //aタグを無効にする 63 }); 64 65 66 // タブをクリックしたら、の動きをページが読み込まれたらすぐに動かす 67 $(window).on('load', function () { 68 $('.tab li:first-of-type').addClass("active"); //最初のliにactiveクラスを追加 69 $('.area:first-of-type').addClass("is-active"); //最初の.areaにis-activeクラスを追加 70 var hashName = location.hash; //リンク元の指定されたURLのハッシュタグを取得 71 GethashID(hashName); //設定したタブの読み込み 72 73 }); 74 //ここまでTabメニューの設定 75 76});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

これが正しい方法なのでしょうか?
もしくは他にも方法があったりするのでしょうか?

期待どおり動いているなら正しいです。

もし同じ様なコードを3回書くのが納得いかないのでしたら、click イベントハンドラの中で this を活用しましょう。

js

1 // クラス名から a- b- c- を消して以下のようにすると、3回書かずに済む 2 $('.box .more-btn').on('click', function () { 3 $('.item.is-hidden', this).slice(0, moreNum).removeClass('is-hidden'); 4 if ($('.item.is-hidden', this).length == 0) { 5 $(this).fadeOut(); 6 } 7 });

投稿2023/05/16 22:29

int32_t

総合スコア20659

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nyankoro0220

2023/05/19 00:59

お世話になります。ご回答ありがとうございます。 回答いただいたのは以下の部分の短縮記述で合っていますでしょうか? 『 $('.a-box .more-btn').on('click', function () { $('.a-item.is-hidden').slice(0, moreNum).removeClass('is-hidden'); if ($('.a-item.is-hidden').length == 0) { $('.a-box .more-btn').fadeOut(); } }); $('.b-box .more-btn').on('click', function () { $('.b-item.is-hidden').slice(0, moreNum).removeClass('is-hidden'); if ($('.b-item.is-hidden').length == 0) { $('.b-box .more-btn').fadeOut(); } }); $('.c-box .more-btn').on('click', function () { $('.c-item.is-hidden').slice(0, moreNum).removeClass('is-hidden'); if ($('.c-item.is-hidden').length == 0) { $('.c-box .more-btn').fadeOut(); } }); 』
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問