連想配列からループで値の受け渡し(jQuery)

指定したhtmlタグからタグまでページ内スクロールするjQueryライブラリを作成していて動作せず躓いてしまったのでご教示いただけたらと思います。よろしくお願いいたします。

lang
1<script type="text/javascript">
2//html側ファイル
3var btn_obj = [
4 {
5   'btn_selector':'.scroll-0',
6   'target_selector':'.contact-0',
7 },
8 {
9   'btn_selector':'.scroll-1',
10   'target_selector':'.contact-1',
11 },
12{
13   'btn_selector':'.scroll-2',
14   'target_selector':'.contact-2',
15 },
16{
17   'btn_selector':'.scroll-3',
18   'target_selector':'.contact-3',
19 },
20{
21   'btn_selector':'.scroll-4',
22   'target_selector':'.contact-4',
23 },
24{
25   'btn_selector':'.scroll-5',
26   'target_selector':'.contact-5',
27 },
28];
29$.each(btn_obj, function(key, value){
30
31  if (typeof value.button_selector === 'undefined') {
32    return false;
33  } else {
34    $(body).PageScroll(
35      value);
36    return true;
37  }
38});
39</script>
40

lang
1//js外部ファイル側
2  !(function($){
3        $.fn.PageScroll = function( options ){
4        var btn_obj,
5            scroll_target,
6            scroll_top,
7            body,
8            scroll_margin = 100;
9
10       var settings = $.extend( {
11                  'btn_selector'    : undefined,
12                  'target_selector' : undefined
13       }, options);
14
15        body = $("html, body");
16        btn_obj = $(options.btn_selector);
17        scroll_target = $(options.target_selector);
18        if(typeof btn_obj === "undefined"){
19          return;
20        }
21
22
23        var offset = scroll_target.offset();
24        scroll_top = offset.top - scroll_margin;
25        btn_obj.click(function(e){
26          e.preventDefault();
27          body.animate({scrollTop:scroll_top}, '1000', 'swing',function(){});
28        });
29      });
30    })(jQuery);
31

行動規範の内容に同意します

回答2件

ベストアンサー

さきほど投稿した回答のコメントに書きましたが、自分ならこう書くかな、というのをあげておきます。もしかしたらやりたいこととは別になってしまったかもしれませんが。

まずは、プラグインを使う側の html から。

html
1<html>
2  <head>
3    <script src="https://code.jquery.com/jquery-2.2.0.min.js" ></script>
4    <script src="jquery-pagescroll.js" ></script>
5    <style>
6      div.target {
7        width: 100;
8        height: 500;
9      }
10      div.target p {
11        background-color: pink;
12      }
13    </style>
14  </head>
15  <body>
16    <div id="mySection0" class="target">
17      <p>【零】</p>
18      <a href="#mySection5">→五</a>
19    </div>
20    <div id="mySection1" class="target">
21      <p>【一】</p>
22      <a href="#mySection3">→三</a>
23    </div>
24    <div id="mySection2" class="target">
25      <p>【二】</p>
26      <a href="#mySection4">→四</a>
27    </div>
28    <div id="mySection3" class="target">
29      <p>【三】</p>
30      <a href="#mySection0">→零</a>
31    </div>
32    <div id="mySection4" class="target">
33      <p>【四】</p>
34      <a href="#mySection1">→一</a>
35    </div>
36    <div id="mySection5" class="target">
37      <p>【五】</p>
38      <a href="#mySection2">→二</a>
39      <a href="#mySection3">→三</a>
40    </div>
41  </body>
42  <script type="text/javascript">
43    $(function() {
44      $('.target').pageScroll();
45    });
46  </script>
47</html>

ご質問のタイトル、「連想配列からループで値の受け渡し」から完全に離れてしまいましたが、一般的には、骨格である html と装飾であるスタイルシート、そして動作であるスクリプト、この三者はできるだけ分離させた方がいいわけです。分業をはかるためにも視覚的なデザインを作る人には JavaScript コードをできるだけ書かせない方がいいわけですし、デザインが変わっても要素が増えても JavaScript のコードは変更しなくてもいいわけです。
ご質問の際に提示された html ですと、連想配列で細かい設定を書いていらっしゃいます。ページの要素が増えていくと、この連想配列も書き換えていかないといけません。

ということで、こういう作りがいいんじゃないか、というプラグインを書いてみました。
0. スクロール先になる要素に対して .pageScroll() メソッドを実行します。(先の例では target クラスをつけた div が対象)
0. スクロール先になる要素には id をつけます。スクロール先は一意に決まらないといけないので、class で指定するのではなく、id で指定するのが妥当と考えます。
0. 「これを押したらスクロール先に飛ぶ」という要素は、とりあえず a タグ限定にしてみました。その a タグの href 属性で飛び先の id を指定します。同じスクロール先に飛ぶ a タグが複数あっても構いません。（ここは a タグ限定でなくてもいいかもです。そうしたら data-* カスタム属性などを使うといいのかな ...）
0. pageScroll() メソッドには引数に連想配列の形をしでオプションが渡せます。.pageScroll({duration: 'slow'}) のように。

html 側にはほとんど JavaScript を書かなくてもよいのがおわかりいただけたでしょうか。

で、プラグインの定義は次になります。

javascript
1!(function($){
2  $.fn.pageScroll = function( options ) {
3    var settings = $.extend( {
4      duration: 1000,
5      easing: 'swing',
6      margin: 100
7    }, options),
8        $body = $('body');
9    $(this).each(function() {
10      var $target = $(this),
11          target_id = $target.attr('id');
12      $('a[href=\\#' + target_id + ']').each(function() {
13        $(this).click(function(e) {
14          e.preventDefault();
15          $body.animate({ scrollTop: $target.offset().top - settings.margin },
16                        settings);
17        });
18      });
19    });
20  };
21})(jQuery);

いかがでしょうか。

投稿2016/01/29 21:16

unau

総合スコア2468

とりあえず、コメントで (1), (2) と書いてある場所を直したら、おそらく実現したいのであろう動きができました。

html
1<script type="text/javascript">
2//html側ファイル
3var btn_obj = [
4 {
5   'btn_selector':'.scroll-0',
6   'target_selector':'.contact-0',
7 },
8 {
9   'btn_selector':'.scroll-1',
10   'target_selector':'.contact-1',
11 },
12{
13   'btn_selector':'.scroll-2',
14   'target_selector':'.contact-2',
15 },
16{
17   'btn_selector':'.scroll-3',
18   'target_selector':'.contact-3',
19 },
20{
21   'btn_selector':'.scroll-4',
22   'target_selector':'.contact-4',
23 },
24{
25   'btn_selector':'.scroll-5',
26   'target_selector':'.contact-5',
27 },
28];
29$.each(btn_obj, function(key, value){
30
31  if (typeof value.btn_selector === 'undefined') { // ← (1) value.button_selector になっていた
32    return false;
33  } else {
34    $(body).PageScroll(
35      value);
36    return true;
37  }
38});
39</script>

javascript
1//js外部ファイル側
2  !(function($){
3        $.fn.PageScroll = function( options ){
4        var btn_obj,
5            scroll_target,
6            scroll_top,
7            body,
8            scroll_margin = 100;
9
10       var settings = $.extend( {
11                  'btn_selector'    : undefined,
12                  'target_selector' : undefined
13       }, options);
14
15        body = $("html, body");
16        btn_obj = $(options.btn_selector);
17        scroll_target = $(options.target_selector);
18        if(typeof btn_obj === "undefined"){
19          return;
20        }
21
22
23        var offset = scroll_target.offset();
24        scroll_top = offset.top - scroll_margin;
25        btn_obj.click(function(e){
26          e.preventDefault();
27          body.animate({scrollTop:scroll_top}, '1000', 'swing',function(){});
28        });
29      }; // <- (2) 閉じ括弧が余分について「});」になっていた
30    })(jQuery);

なんですが、いくつか疑義があります。

まずは、ここまでのスクリプトを書ける技術があるのに、なぜこんな単純なバグに気がつかないのか、ということです。(2) については構文エラーなので、すぐにわかるはずです。
それがわからないとしたら、開発環境に問題があると思います。構文エラーがすぐにわからないような開発環境で開発していても生産性が悪すぎます。まじめに開発する気があるなら改めるべきです。

あと、pageScroll() プラグインの作りもすっきりしていない印象のですが、技術レベルが推察しにくいコードなのでどうコメントしていいのか ...。もしかしたら私よりも JQuery プラグインに詳しい方かもしれませんし。

投稿2016/01/29 19:30

unau

総合スコア2468