javascriptの初歩的な質問です。

下記のようなプログラムをfor文で簡略化したいと考えています。

//元のプログラム
var targetOffset1 = 12;
var targetOffset2 = 30;
var targetOffset3 = 45;

$("#hoge_a").click(function () {
$("html,body").animate({scrollTop: targetOffset1 + 1}, "slow");
return false;
});

$("#hoge_b").click(function () {
$("html,body").animate({scrollTop: targetOffset2 + 1}, "slow");
return false;
});

$("#hoge_c").click(function () {
$("html,body").animate({scrollTop: targetOffset3 + 1}, "slow");
return false;
});

//簡略化したプログラム
var targetOffset1 = 12;
var targetOffset2 = 30;
var targetOffset3 = 45;

menu_div = new Array("#hoge_a","#hoge_b","#hoge_c")

for (var i = 0; i <= menu_div.length -1; i++){
$(menu_div[i]).click(function () {
$("html,body").animate({scrollTop: ★ + 1}, "slow");
return false;
});
};
------------------------------------------------------

★の部分の書き方を教えていただけますでしょうか。
※for文以外の書き方でも簡略化出来ればお願いします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/10/16 12:25:35
  • 終了:2011/10/16 14:29:29

ベストアンサー

id:a-kuma3 No.2

a-kuma3回答回数4489ベストアンサー獲得回数18572011/10/16 13:15:06

ポイント200pt

ぼくなら、こうする。

var menu_data = [
        {"id": "#hoge_a", "offset": 12},
        {"id": "#hoge_b", "offset": 30},
        {"id": "#hoge_c", "offset": 45}
    ];

for (var i = 0; i <= menu_data.length -1; i++){
    $(menu_data[i].id).click(function () {
            $("html,body").animate({scrollTop: menu_data[i].offset + 1}, "slow");
            return false;
        });
};

id と offset は、ペアになってるので、それをまとめて書けるようになってる方が、

対象が増えたりしたときに、分かりやすいと思うので。

id:dmt13

連想配列を使ったことが無かったので、非常に勉強になりました。

有難う御座います。

2011/10/16 14:31:01

その他の回答(2件)

id:grankoyama No.1

グラ娘。回答回数560ベストアンサー獲得回数1702011/10/16 12:46:12

ポイント30pt

もう一個配列を作っておけば

var Offset = new Array ( 12,30,45 ); ←適宜変数で。


そしたら、

$("html,body").animate({scrollTop: Offset[i] + 1}, "slow");

とかいうふうにしたらいいんじゃないでしょうか?

他には思いつきません。


無料質問と思って、さくっと思いつきで回答してしまいました。

なんとなく動作確認やらなんにやらしているうちにスマートな回答がa-kuma3さん

から出てますのでそちらを参考にしてください。

で、わたしの回答は無視(ポイント0でかまいせんので)で。すみません。

id:dmt13

targetOffsetを配列にしなかったのは、実は他のところでも使っていてそちらに手を加えず変数名をiを使って書き換えたかったのですが、後々のことも考えて全てちゃんと書き直すことにしました。

有難う御座いました。

2011/10/16 14:34:12
id:a-kuma3 No.2

a-kuma3回答回数4489ベストアンサー獲得回数18572011/10/16 13:15:06ここでベストアンサー

ポイント200pt

ぼくなら、こうする。

var menu_data = [
        {"id": "#hoge_a", "offset": 12},
        {"id": "#hoge_b", "offset": 30},
        {"id": "#hoge_c", "offset": 45}
    ];

for (var i = 0; i <= menu_data.length -1; i++){
    $(menu_data[i].id).click(function () {
            $("html,body").animate({scrollTop: menu_data[i].offset + 1}, "slow");
            return false;
        });
};

id と offset は、ペアになってるので、それをまとめて書けるようになってる方が、

対象が増えたりしたときに、分かりやすいと思うので。

id:dmt13

連想配列を使ったことが無かったので、非常に勉強になりました。

有難う御座います。

2011/10/16 14:31:01
id:Lhankor_Mhy No.3

Lhankor_Mhy回答回数779ベストアンサー獲得回数2312011/10/16 14:09:54

ポイント70pt

なにこの質問楽しそう。

 

jQuery使っているみたいなので、自分ならHTMLをこうして

<div id="#hoge_a" class="hoge">...</div>
<div id="#hoge_b" class="hoge">...</div>
<div id="#hoge_c" class="hoge">...</div>

 

スクリプトをこうします。

$('.hoge')
  .click(function(){
    $('html,body').animate( { scrollTop: $(this).data('targetOffset') +1 }, 'slow');
  })
  .first().data('targetOffset',12)
  .next().data('targetOffset',30)
  .next().data('targetOffset',45);

 

でも、確かに好みの問題で、基本的に先の回答で問題はないわけでポイントはいらないです。

id:dmt13

このように書くことも可能なのですね。勉強中ですのでバリエーションとして参考にさせていただきました。有難う御座います。

2011/10/16 14:36:31
  • id:windofjuly
    うぃんど 2011/10/16 13:18:44
    「★ + 1 の部分でevalを使えば?」なんて思ったりもしますけど、
    ぐらむす。(id:grankoyama)さんのあげておられる方法に帰結すると思いますね
     
    もう少しマニアックに連想配列(menu_divがキーで、targetOffsetが値)にして、
    なんて手もありますけど、このあたりは好き好きだと思うのでコメントにしておきます
  • id:dmt13
    windofjulyさん、ご回答有難う御座います。
    eval()で変換すれば良かったのですね。

    a-kuma3さんより連想配列のご回答頂きました。
    有難う御座います。

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません