人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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文以外の書き方でも簡略化出来ればお願いします。

●質問者: dmt13
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● グラ娘。
●30ポイント

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

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


そしたら、

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

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

他には思いつきません。


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

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

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

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

◎質問者からの返答

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

有難う御座いました。


2 ● a-kuma3
●200ポイント ベストアンサー

ぼくなら、こうする。

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 は、ペアになってるので、それをまとめて書けるようになってる方が、

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

◎質問者からの返答

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

有難う御座います。


3 ● Lhankor_Mhy
●70ポイント

なにこの質問楽しそう。

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);

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

◎質問者からの返答

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

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ