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

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

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

Visual Studio Codeとは、Microsoft社が開発したマルチプラットフォーム対応のテキストエディタです。Visual Studioファミリーの一員でもあります。拡張性とカスタマイズ性が高く、テキストエディタでありながら、IDEと遜色ない機能を備えることができます。

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回答

313閲覧

「もっと見るボタン(view more)」の動きが思うようにできません。

iceforest

総合スコア15

Visual Studio Code

Visual Studio Codeとは、Microsoft社が開発したマルチプラットフォーム対応のテキストエディタです。Visual Studioファミリーの一員でもあります。拡張性とカスタマイズ性が高く、テキストエディタでありながら、IDEと遜色ない機能を備えることができます。

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/03/05 11:49

実現したいこと

画像を8個表示して、残りの画像を「もっと見るボタン」を押したら見られるようにしたいです。
今の状態だと、最初の画面で、6個までしか表示させられません。
変数の値を変えたり、コードを変更してみても直りません。

jquery のコードは、ほかのサイトからコピーして、自分のサイトで使えるように変数を変えたりしたものです。
使えるようにはなったのですが、思った通りの挙動になりません。

ヒントだけでも頂けたら、うれしいです。

試したこと

Jqueryのコードの書き換えによる挙動の確認
nth-childの勉強
sliceの勉強

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <link rel="stylesheet" href="reset.css" /> 8 <link rel="stylesheet" href="stylesheet.css" /> 9 <link rel="stylesheet" href="responsive.css" /> 10 <script 11 src="https://code.jquery.com/jquery-3.6.3.min.js" 12 integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" 13 crossorigin="anonymous" 14 ></script> 15 <title>Document</title> 16 </head> 17 <body> 18 <header class="header"> 19 <div class="header-div"> 20 <a class="header-a" href="index.html"> 21 <img class="header-img" src="img\logo.svg" alt="" /> 22 </a> 23 </div> 24 <!-- <nav> 25 <ul class="nav-ul"> 26 <li class="nav-li"><a href=""> PRODUCTS</a></li> 27 <li class="nav-li"><a href=""> ABOUT</a></li> 28 <li class="nav-li"><a href=""> COMPANY</a></li> 29 <li class="nav-li"><a href=""> CONTACT</a></li> 30 </ul> 31 </nav> --> 32 <div class="toggle_btn"></div> 33 </header> 34 <main class="a"> 35 <h2>products</h2> 36 <div class="a-container"> 37 <ul class="a-ul"> 38 <li class="a-li"> 39 <a class="a-a" href=""> 40 <img class="a-img" src="img\item1.jpg" alt="" /> 41 <p> 42 プロダクトタイトルプロダクトタイトル <br /> 43 ¥99,999 +tax 44 </p> 45 </a> 46 </li> 47 <li class="a-li"> 48 <a class="a-a" href=""> 49 <img class="a-img" src="img\item2.jpg" alt="" /> 50 <p> 51 プロダクトタイトルプロダクトタイトル <br /> 52 ¥99,999 +tax 53 </p> 54 </a> 55 </li> 56 <li class="a-li"> 57 <a class="a-a" href=""> 58 <img class="a-img" src="img\item3.jpg" alt="" /> 59 <p> 60 プロダクトタイトルプロダクトタイトル <br /> 61 ¥99,999 +tax 62 </p> 63 </a> 64 </li> 65 <li class="a-li"> 66 <a class="a-a" href=""> 67 <img class="a-img" src="img\item4.jpg" alt="" /> 68 <p> 69 プロダクトタイトルプロダクトタイトル <br /> 70 ¥99,999 +tax 71 </p> 72 </a> 73 </li> 74 <li class="a-li"> 75 <a class="a-a" href=""> 76 <img class="a-img" src="img\item5.jpg" alt="" /> 77 <p> 78 プロダクトタイトルプロダクトタイトル <br /> 79 ¥99,999 +tax 80 </p> 81 </a> 82 </li> 83 <li class="a-li"> 84 <a class="a-a" href=""> 85 <img class="a-img" src="img\item6.jpg" alt="" /> 86 <p> 87 プロダクトタイトルプロダクトタイトル <br /> 88 ¥99,999 +tax 89 </p> 90 </a> 91 </li> 92 <li class="a-li is-hidden"> 93 <a class="a-a" href=""> 94 <img class="a-img" src="img\item7.jpg" alt="" /> 95 <p> 96 プロダクトタイトルプロダクトタイトル <br /> 97 ¥99,999 +tax 98 </p> 99 </a> 100 </li> 101 <li class="a-li is-hidden"> 102 <a class="a-a" href=""> 103 <img class="a-img" src="img\item8.jpg" alt="" /> 104 <p> 105 プロダクトタイトルプロダクトタイトル <br /> 106 ¥99,999 +tax 107 </p> 108 </a> 109 </li> 110 <li class="a-li is-hidden"> 111 <a class="a-a" href=""> 112 <img class="a-img" src="img\item9.jpg" alt="" /> 113 <p> 114 プロダクトタイトルプロダクトタイトル <br /> 115 ¥99,999 +tax 116 </p> 117 </a> 118 </li> 119 <li class="a-li is-hidden"> 120 <a class="a-a" href=""> 121 <img class="a-img" src="img\item10.jpg" alt="" /> 122 <p> 123 プロダクトタイトルプロダクトタイトル <br /> 124 ¥99,999 +tax 125 </p> 126 </a> 127 </li> 128 <li class="a-li is-hidden"> 129 <a class="a-a" href=""> 130 <img class="a-img" src="img\item11.jpg" alt="" /> 131 <p> 132 プロダクトタイトルプロダクトタイトル <br /> 133 ¥99,999 +tax 134 </p> 135 </a> 136 </li> 137 <li class="a-li is-hidden"> 138 <a class="a-a" href=""> 139 <img class="a-img" src="img\item12.jpg" alt="" /> 140 <p> 141 プロダクトタイトルプロダクトタイトル <br /> 142 ¥99,999 +tax 143 </p> 144 </a> 145 </li> 146 <a href="">1</a><a href="">2</a> 147 148 149 </ul> 150 <p class="more-btn">View More</p> 151 </div> 152 </main> 153 <footer> 154 <div class="footer-div"> 155 <ul class="footer-ul"> 156 <li class="footer-li">instagram</li> 157 <li class="footer-li">twitter</li> 158 <li class="footer-li">facebook</li> 159 </ul> 160 161 </div> 162 <div class="c">© Furniture Design</div> 163 </footer> 164 <script src="main.js"></script> 165 </body> 166</html> 167

css

1header { 2 position: fixed; 3 height: 80px; 4 width: 100%; 5 padding: 30px; 6} 7 8.nav { 9 display: none; 10} 11 12.a { 13 padding: 150px 20px; 14} 15 16.a-ul { 17 max-width: 1360px; 18 margin: 0 auto; 19 display: flex; 20 justify-content: space-between; 21 flex-wrap: wrap; 22 align-items: center; 23 list-style: none; 24} 25.a-ul .a-li { 26 width: 23%; 27} 28.a-ul .a-img { 29 width: 100%; 30} 31.a-ul .a-a { 32 text-decoration: none; 33}/*# sourceMappingURL=stylesheet.css.map */ 34 35.more-btn { 36 text-align: center; 37} 38.a-li{ 39 opacity: 1; 40} 41.a-li.is-hidden { 42 opacity: 0; 43 height: 0; 44 margin: 0; 45} 46.more-btn { 47 margin-top: 20px; 48} 49.more-btn.is-btn-hidden{ 50 display:none; 51} 52.more-btn button { 53 background-color: #333; 54 color:#fff; 55 border: none; 56 cursor: pointer; 57 outline: none; 58 padding: 0; 59 height: 32px; 60 line-height: 32px; 61 width: 120px; 62} 63 64footer { 65 display: flex; 66 justify-content: space-between; 67 align-items: center; 68} 69 70.footer-ul { 71 display: flex; 72 justify-content: space-between; 73 list-style: none; 74 75} 76 77.footer-li { 78 padding: 20px; 79} 80 81.c { 82 padding: 20px; 83} 84 85

Jquery

1/* ここには、表示するリストの数を指定します。 */ 2var moreNum = 8; 3 4/* 表示するリストの数以降のリストを隠しておきます。 */ 5$('.a-li:nth-child(n + ' + (moreNum + 1) + ')').addClass('is-hidden'); 6 7/* 全てのリストを表示したら「もっとみる」ボタンをフェードアウトします。 */ 8$('.more-btn').on('click', function() { 9 $('.a-li.is-hidden').slice(0, moreNum).removeClass('is-hidden'); 10 if ($('.a-li.is-hidden').length == 0) { 11 $('.more-btn').fadeOut(); 12 } 13}); 14 15/* リストの数が、表示するリストの数以下だった場合、「もっとみる」ボタンを非表示にします。 */ 16$(function() { 17 var list = $(".a-ul li").length; 18 if (list < moreNum) { 19 $('.more-btn').addClass('is-btn-hidden'); 20 } 21});

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

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

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

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

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

guest

回答1

0

ベストアンサー

html92行目と101行目

<li class="a-li is-hidden">

<li class="a-li">

に修正すれば、画像が6個から8個になります。

なお、「表題」と「実現したいこと」の内容が食い違っております。
上記の回答は「実現したいこと」の一つの例となります。

投稿2023/03/06 06:38

編集2023/03/06 06:42
doyuma

総合スコア66

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

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

iceforest

2023/03/07 02:04

回答ありがとうございます。 おかげさまで、表示が直りました。 なぜ直ったかは自分で分析してみます。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問