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

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

新規登録して質問してみよう
ただいま回答率
85.50%
オブジェクト

オブジェクト指向において、データとメソッドの集合をオブジェクト(Object)と呼びます。

jQuery

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

Q&A

解決済

2回答

3130閲覧

【jQuery】グローバル関数を使わないでカプセル化を用いてスライドショーを実装したいです。

退会済みユーザー

退会済みユーザー

総合スコア0

オブジェクト

オブジェクト指向において、データとメソッドの集合をオブジェクト(Object)と呼びます。

jQuery

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

0グッド

0クリップ

投稿2019/12/05 07:57

編集2019/12/05 08:30

グローバル関数に変数を定義せず、ローカル関数で(var current=0;とvar num=0;)を入れるためにはカプセル化を用いてスライドショーを実装しようと考えてます。(ローカル関数で変数を宣言するなら、カプセル化を用いれば実装はできるとアドバイスをいただきました。)
カプセル化を用いて書いてみましたが、どこを修正すれな良いかが分からなかったため、教えていただきたいです。

現状のエラー

今はコンソールでslideNextとslidePrevが定義されてないとエラーが表示されている状態です。

エラーが出ているhtmlとcssファイル

html

1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 6<meta name="format-detection" content="telephone=no"> 7<title></title> 8<link rel="stylesheet" href="css/reset.css"> 9<link rel="stylesheet" href="css/base.css"> 10<link rel="stylesheet" href="css/style.css"> 11</head> 12<body> 13<div class="wrapper"> 14 <div class="slider-wrap"> 15 <div class="slider-area"> 16 <ul class="slider-list clearfix"> 17 <li><img src="http://placehold.jp/150x150.png" alt=""></li> 18 <li><img src="http://placehold.jp/3d4070/ffffff/150x150.png" alt=""></li> 19 <li><img src="http://placehold.jp/150x150.png" alt=""></li> 20 <li><img src="http://placehold.jp/3d4070/ffffff/150x150.png" alt=""></li> 21 </ul> 22 <button type="button" class="slider-ctrl-btn prev" data-ctrl="prev"></button> 23 <button type="button" class="slider-ctrl-btn next" data-ctrl="next"></button> 24 </div> 25 </div> 26</div> 27<script type="text/javascript" src="js/jquery.js"></script> 28<script type="text/javascript"> 29/** 30 * (説明) 31 * @type {number} current ←クリックしたときの初期値 32 * @type {number} num ←要素の幅を取得した後に幅の数値を入れる変数 33 * @type {string} numLength ←画像の位置情報を取得するための要素の個数 34 * @type {number} numWidth ←要素の幅 35 * 36 * 37**/ 38 39$(function(){ 40 $('.next').on('click',function(){ 41 slideNext(); 42 }); 43 44 $('.prev').on('click',function(){ 45 slidePrev(); 46 }); 47 48 function slider(){ 49 var current=0; 50 var num=0; 51 52 function slideNext(){ 53 var numWidth=$('.slider-list img').eq(current).width(); 54 var numLength=$('.slider-list img').length; 55 current++; 56 if(current<numLength){ 57 num-=numWidth; 58 }else{ 59 num=0; 60 current=0; 61 } 62 $('.slider-list').animate({left:num}); 63 } 64 return slideNext; 65 66 function slidePrev(){ 67 var numWidth=$('.slider-list img').eq(current).width(); 68 var numLength=$('.slider-list img').length; 69 current--; 70 if(current>=0){ 71 num+=numWidth; 72 }else{ 73 num=-$('.slider-list img:not(:last)').map(function(){ 74 return $(this).width(); 75 }).get().reduce((x,y)=>x+y); 76 current=numLength-1; 77 } 78 $('.slider-list').animate({left:num}); 79 } 80 return slidePrev; 81 } 82}); 83</script> 84</body> 85</html>

css

1.slider-wrap { 2 width: 600px; 3 padding: 10px; 4 margin: 0 auto; 5 border-radius: 10px; 6 background-color: #DDD; 7 box-shadow: 0 2px 5px rgba(50, 50, 50, 0.4); 8} 9.slider-area { 10 position: relative; 11 width: 600px; 12 height: 300px; 13 background-color: #FFF; 14 overflow: hidden; 15} 16.slider-list { 17 position: absolute; 18 top: 0; 19 left: 0; 20 width: 2400px; 21 height: 300px; 22} 23.slider-list > li { float: left; } 24.slider-ctrl-btn { 25 position: absolute; 26 top: 50%; 27 width: 30px; 28 height: 30px; 29 margin-top: -15px; 30 cursor: pointer; 31 border-radius: 15px; 32 background-color: rgba(255, 255, 255, 0.5); 33} 34.slider-ctrl-btn.prev { left: 30px; } 35.slider-ctrl-btn.next { right: 30px; }

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

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

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

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

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

yambejp

2019/12/05 08:10

特殊なオブジェクトでDOMに対してメソッドを付加していく jQueryとカプセル化はさほど相性が良いとは思えませんが ES6で書き直したいという質問でしょうか?
kei344

2019/12/05 08:12

「何」が「どのように」わからないのか、どういうコードにしたいのかなど、具体的に記述されたほうが回答を得られやすいと思います。
azuapricot

2019/12/05 08:13

ただカプセル化したいだけでは回答は難しいと思います。 何をどのようにしたいんですか?
退会済みユーザー

退会済みユーザー

2019/12/05 08:32 編集

質問ありがとうございます。 やりたいこととしては、var current = 0;とvar num = 0;をローカルで宣言して動かせるようにしたいです。
guest

回答2

0

グローバル変数を使いたくないのですね?
(誰だよこんなひどいソース書いたの!・・・って私です)

currentクラスをつけるっていうのはjQueryっぽいのでやってみてください

javascript

1$(function(){ 2 $('.slider-list img:first').addClass('current'); 3 $('.next,.prev').on('click',function(){ 4 var current=$('.slider-list img.current'); 5 var idx=$('.slider-list img').index(current); 6 idx+=$(this).is('.next')?1:-1 7 if(idx>=$('.slider-list img').length) idx=0; 8 if(idx<0) idx=$('.slider-list img').length-1; 9 current.removeClass('current'); 10 $('.slider-list img').eq(idx).addClass('current'); 11 var left=-$('.slider-list img:lt('+idx+')').map(function(){ 12 return $(this).width(); 13 }).get().concat(0).reduce((x,y)=>x+y); 14 $('.slider-list').animate({left}); 15 }); 16});

投稿2019/12/05 09:34

編集2019/12/05 09:35
yambejp

総合スコア114572

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

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

退会済みユーザー

退会済みユーザー

2019/12/05 10:48 編集

ありがとうございます!! これならグローバル変数使ってないので、理想の回答です。 クリックイベントと処理の中身を切り分けて書くにはどう書けば良いでしょうか?
guest

0

ベストアンサー

js

1$(function(){ 2 var current=0; 3 var num=0; 4 5 function slideNext(){ 6//... 7 } 8 9 function slidePrev(){ 10//... 11 } 12 13 $('.next').on('click',function(){ 14 slideNext(); 15 }); 16 17 $('.prev').on('click',function(){ 18 slidePrev(); 19 }); 20 21});

これでいいかと思います。$(function(){})の中でvar宣言された変数は、クロージャが生成されるので、ローカル変数です。

投稿2019/12/05 09:02

Lhankor_Mhy

総合スコア35860

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問