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

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

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

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

HTML

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

Q&A

解決済

3回答

4407閲覧

jQuery グループ分けした要素をボタン等で表示させたい。

d-xanthus

総合スコア56

jQuery

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

HTML

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

0グッド

0クリップ

投稿2016/02/22 12:33

お世話になります。
数件ずつグループ分けした要素を、「続きを読む」ボタン等で
次々と表示させたいと思っています。

最初のグループ要素に対してjQueryを使って
連番を降ることまではできたのですが、
そこから先の方法が判らず苦慮しています。
jQueryはまだ触りだしたところで、ほぼ初心者です。

###前提・実現したいこと

ページを読込んだ際、最初のグループのみ表示され、
以下のグループは「続きを読む」ボタンをクリックすることで
対応する連番のdivが表示されるようにしたいと思います。。
(.more_2をクリックで.group_2を表示)

お知恵を拝借できればと思いますので
何卒よろしくお願いいたします

###ソースコード

html

1<div class="group_1"> 2 <section> 〜コンテンツが入ります</section> 3</div> 4 5<a href="#" class="more_2">続きを読む</a> 6<!-- 以下の要素は最初は非表示 --> 7<div class="group_2"> 8 <section> 〜コンテンツが入ります</section> 9</div> 10 11<a href="#" class="more_3">続きを読む</a> 12<div class="group_3"> 13 <section> 〜コンテンツが入ります</section> 14</div> 15 16<a href="#" class="more_4">続きを読む</a> 171819

javascript

1#(function(){ 2 #('.group').each(function(i){ 3 #(this).attr('class','group_' + (i+1)); 4 }); 5 #('.more').each(function(i){ 6 #(this).attr('class','more_' + (i+2)); 7 }); 8 //以上で要素に連番を降っています。 9});

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

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

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

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

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

guest

回答3

0

コード設置予定ページが没になってしまいましたので
この質問を終了させていただきます。
ありがとうございました。

投稿2016/02/29 02:40

d-xanthus

総合スコア56

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

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

0

ベストアンサー

カスタムデータ属性を利用すると楽です。
コンテンツ部分のHTMLを下記のように書き換えます。
「data-」の部分も予め入れておいてください。

動作的にはクリックした「data-more」と同じ番号を持つ「data-group」に付けられている「dn」のクラスを外すだけです。
番号の部分をカスタムデータ属性に分けることにより、見た目部分のクラス割り当てについては、全て「group」と「more」で問題なくなります。仮にクラス名を変更しても、JSの修正は必要ありません。

html

1<div class="group" data-group="1"> 2 <section> 〜コンテンツが入ります</section> 3</div> 4 5<a href="#" class="more" data-more="2">続きを読む</a> 6<!-- 以下の要素は最初は非表示 --> 7<div class="group dn" data-group="2"> 8 <section> 〜コンテンツが入ります</section> 9</div> 10 11<a href="#" class="more" data-more="3">続きを読む</a> 12<div class="group dn" data-group="3"> 13 <section> 〜コンテンツが入ります</section> 14</div>

css

1.dn { 2 display: none; 3}

JavaScript

1var moreView = function(selector){ 2 this.$more = $(selector); 3 this.init(); 4}; 5 6moreView.prototype = { 7 init: function(){ 8 this.number = this.$more.data('more'); 9 this.$group = $('[data-group]'); 10 this.$target = this.getTarget(this.number); 11 12 this.bindEvent(); 13 }, 14 bindEvent: function(){ 15 var _self = this; 16 17 this.$more.on('click', function(e){ 18 e.preventDefault(); 19 _self.showTarget(); 20 }); 21 }, 22 getTarget: function(number){ 23 var $target = this.$group.filter(function(){ 24 return $(this).data('group') === number; 25 }); 26 27 return $target; 28 }, 29 showTarget: function(){ 30 this.$target.removeClass('dn'); 31 } 32} 33 34$(function(){ 35 $('[data-more]').each(function(){ 36 new moreView(this); 37 }) 38});

投稿2016/02/29 02:27

編集2016/02/29 02:28
yamato_hikawa

総合スコア2092

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

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

d-xanthus

2016/02/29 02:44

yamato_hikawaさん ご丁寧にご回答いただき、ありがとうございました。 残念ながらコード設置予定のページが没になっていまいましたので、 こちらの質問は終了致します。 ご記載いただいたご返答は、機会がありましたら 参考にさせていただきたいと思います。 いろいろありまして、告知が遅れましたこと、お詫びします。 ありがとうございました。
guest

0

ちょっと html を書き換えちゃったところがありますが、こんな感じでしょうか。

html

1<html> 2<head> 3<title>test</title> 4<style> 5div.page { 6 height: 300px; 7 width: 400px; 8 background-color: gray; 9} 10a.more { 11} 12</style> 13<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 14<script type="text/javascript" src="mypages.js"></script> 15</head> 16<body> 17<div id="pages"> 18 <div class="page"> 19 <section> 〜コンテンツが入ります</section> 20 <a href="#" class="more">続きを読む</a> 21 </div> 22 <div class="page"> 23 <section> 〜コンテンツが入ります</section> 24 <a href="#" class="more">続きを読む</a> 25 </div> 26 <div class="page"> 27 <section> 〜コンテンツが入ります</section> 28 <a href="#" class="more">続きを読む</a> 29 </div> 30 <div class="page"> 31 <section> 〜コンテンツが入ります</section> 32 </div> 33</div> 34<script>

javascript

1!function($){ 2 $.fn.mypages = function() { 3 $(this).children().each(function(i) { 4 var $page = $(this) 5 .addClass('group_' + i) 6 .find('a.more').click(function() { 7 $('div.group_' + (i + 1)).show(); 8 return false; 9 }); 10 if (i > 0) $page.hide(); 11 }) 12 .end(); 13 }; 14}(jQuery);

追記
プラグイン化しない版を書いてみました。

html

1<html> 2<head> 3<title>test</title> 4<style> 5div.page { 6 height: 300px; 7 width: 400px; 8 background-color: gray; 9} 10a.more { 11} 12</style> 13<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 14</head> 15<body> 16<div id="pages"> 17 <div class="page"> 18 <section> 〜コンテンツが入ります</section> 19 <a href="#" class="more">続きを読む</a> 20 </div> 21 <div class="page"> 22 <section> 〜コンテンツが入ります</section> 23 <a href="#" class="more">続きを読む</a> 24 </div> 25 <div class="page"> 26 <section> 〜コンテンツが入ります</section> 27 <a href="#" class="more">続きを読む</a> 28 </div> 29 <div class="page"> 30 <section> 〜コンテンツが入ります</section> 31 </div> 32</div> 33<script> 34$(function() { 35 $('#pages').children().each(function(i) { 36 var $page = $(this) 37 .addClass('group_' + i) 38 .find('a.more').click(function() { 39 $('div.group_' + (i + 1)).show(); 40 return false; 41 }) 42 .end(); 43 if (i > 0) $page.hide(); 44 }); 45}); 46</script> 47</body> 48</html>

投稿2016/02/22 15:16

編集2016/02/23 01:28
unau

総合スコア2468

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

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

d-xanthus

2016/02/23 01:19

unauさん 夜遅く、早速のご回答をいただき、ありがとうございました。 ただ…、すいません。 こちらで検証してみたのですが、まったく動きませんでした。 <head>の中に"mypages.js"を読込んでいますが、こちらは ご提示いただいたスクリプトでよろしいのでしょうか?
unau

2016/02/23 01:21

ごめんなさい。ご指摘のとおりです。提示したスクリプトを mypages.js として保存してみても駄目でした?
unau

2016/02/23 01:29

jQuery プラグイン化しない版のコードを回答に追記しておきました。
d-xanthus

2016/02/29 02:39

unau さん、 お返事遅れて申し訳ないです。 結局いろいろありまして…、設置予定のページ自体が没になってしまい、 ご返答に気付かずじまいになっておりました。 誠に申し訳ないです。 あらためてご回答いただき、ありがとうございました。 お礼申しあげます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問