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

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

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

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

jQuery

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

Q&A

解決済

2回答

282閲覧

カスタマイズしたjsのデバックに関して

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2019/04/01 06:04

【←】【→】【サムネ】のボタンを押し、現在見ているページを
サムネの赤枠(class属性のactiveが移動することで)
表示するようにしようとしています。

以前、
ここでやり方を教えて頂き(https://teratail.com/questions/181676)
デモを作成しました。

デモではしっかり動いたのですが、
プラグインに実装してみるとうまく動きません。

Chromeのデベロッパーツールで、
jsの機能を一つ一つ止めてみると正常に動いているのですが、
どうしても原因が分かりません。

何が原因かわかりますでしょうか?

【デモ】
http://footmarkdays.web.fc2.com/demo.html
【問題のページ】
http://footmarkdays.web.fc2.com/index1_.html

サムネの部分はうまく動いているような気がします。
【←】【→】を押した時が正常に動いていません。

$('.lg-next,.lg-prev,.lg-thumb-item').on('click',function(e){ var idx=$('.lg-thumb-item').index($('.lg-thumb-item.active')); if($(this).is('.lg-thumb-item')) idx=$('.lg-thumb-item').index(this); idx+=($(this).is('.lg-prev')?-1:0)+($(this).is('.lg-next')?1:0); if(idx<0) idx=$('.lg-thumb-item').length-1; if(idx>=$('.lg-thumb-item').length) idx=0; $('.lg-thumb-item').removeClass('active').eq(idx).addClass('active'); });

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

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

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

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

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

Lhankor_Mhy

2019/04/20 02:46

「まだ回答を求めています」とのことですが、moredeepさんより回答がついているので、そちらをご検討されてはいかがでしょうか。
guest

回答2

0

ベストアンサー

moredeepさんと同じ内容になってしまいますが、具体的に書いてみます。
moredeepさんの方法を試した結果が書かれていませんが、既に試されているのであれば無視して下さって構いません。

以下のように書かれているところを、

javascript

1$(function() { 2 var html ='', 3 $select = $('#select_detail'), 4 selectHtml = $select.detach(), 5 PAGE_NUM = 5, 6 DIR = 'images/details2/', 7 BEFORE = 'page_', 8 EXTENSION = '.png'; 9 10 for(var i=0; i<=PAGE_NUM ;i=i+1|0){ 11 var file = DIR + BEFORE + i + EXTENSION, 12 img_id = i === 0 ? 'id="start"' : '', 13 li_class = i === 0 ? '' : 'class="d_none"'; 14 15 html += '<li '+ li_class +'data-src="'+file+'"><img src="'+file+'"'+img_id+'></li>'; 16 } 17 $('#lightgallery').html(html).lightGallery().on('onSlideItemLoad.lg',function(){ 18 $('.lg-toolbar').append(selectHtml); 19 20 $('.lg-next,.lg-prev,.lg-thumb-item').on('click',function(e){ 21 var idx=$('.lg-thumb-item').index($('.lg-thumb-item.active')); 22 if($(this).is('.lg-thumb-item')) idx=$('.lg-thumb-item').index(this); 23 idx+=($(this).is('.lg-prev')?-1:0)+($(this).is('.lg-next')?1:0); 24 if(idx<0) idx=$('.lg-thumb-item').length-1; 25 if(idx>=$('.lg-thumb-item').length) idx=0; 26 $('.lg-thumb-item').removeClass('active').eq(idx).addClass('active'); 27 }); 28 }); 29});

次のように修正したらどうなるでしょうか?

javascript

1$(function() { 2 var html ='', 3 $select = $('#select_detail'), 4 selectHtml = $select.detach(), 5 PAGE_NUM = 5, 6 DIR = 'images/details2/', 7 BEFORE = 'page_', 8 EXTENSION = '.png'; 9 10 for(var i=0; i<=PAGE_NUM ;i=i+1|0){ 11 var file = DIR + BEFORE + i + EXTENSION, 12 img_id = i === 0 ? 'id="start"' : '', 13 li_class = i === 0 ? '' : 'class="d_none"'; 14 15 html += '<li '+ li_class +'data-src="'+file+'"><img src="'+file+'"'+img_id+'></li>'; 16 } 17 $('#lightgallery').html(html).lightGallery().on('onSlideItemLoad.lg',function(){ 18 $('.lg-toolbar').append(selectHtml); 19 }); 20 21 // この部分を外に出しました 22 $('.lg-next,.lg-prev,.lg-thumb-item').on('click',function(e){ 23 var idx=$('.lg-thumb-item').index($('.lg-thumb-item.active')); 24 if($(this).is('.lg-thumb-item')) idx=$('.lg-thumb-item').index(this); 25 idx+=($(this).is('.lg-prev')?-1:0)+($(this).is('.lg-next')?1:0); 26 if(idx<0) idx=$('.lg-thumb-item').length-1; 27 if(idx>=$('.lg-thumb-item').length) idx=0; 28 $('.lg-thumb-item').removeClass('active').eq(idx).addClass('active'); 29 }); 30});

投稿2019/04/20 03:41

siruku6

総合スコア1382

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

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

0

$('#lightgallery').html(html).lightGallery().on('onSlideItemLoad.lg',function(){

この中でイベントを設定しているからではないでしょうか?"onSlideItemLoad.lg"について詳しく知りませんが、スライドショーの画像を読み込んだ時に来ている気がします。
つまり、clickイベントが何重にも登録されている?(=3つ登録されていれば、一気に3つ移動するし、4つ登録されていれば4つ移動する)
もう一つ外のスコープでclickイベントを登録してみてはいかがでしょうか。

投稿2019/04/01 06:45

moredeep

総合スコア1507

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問