jQueryで例えば、
var H = 600; とした場合、
$("#footer").css("top" , H); でも、
$("#footer").css("top" , H + "px"); でも機能しますが、
var H = $("#contents").height(); とした途端、
$("#footer").css("top" , H); も、
$("#footer").css("top" , H + "px"); も機能しません。
後者を機能させる方法はございますでしょうか。
何卒ご教授のほど、よろしくお願い致します。
No.5ベストアンサー
- 回答日時:
#4です。
>スコープについては何となく知っていますが、実験的な意味で色々やってみました。
>var H = $("#container").height();を<div id = "container"></div>の後に記述した
>ところ、値を取得できました。
これは、スコープの問題と言うよりは、実行順序(タイミング)の問題です。
(こちらも重要なので、理解しておくにこしたことはありません)
>var H = $("#container").height();を#containerよりも前にグローバルで記述する場合、
>#containerが読み込まれてから値を取得するためには、どのようにすればよいでしょうか。
原則は前に書いたとおりですので、付け加えることはありません。
例えばhead内にスクリプトを置くとするならば、まだ要素が設定されていない時にスクリプトが実行されます。
そのまま要素を取得しようとするとundefinedになるので、前述の$(function(){ の構文が利用されることになりますが、グローバル変数を利用してよいのなら…
var H; // グローバル変数を宣言(値はundefined)
・・・・・
$(function(){ // documentのready後に実行される内容(上記var宣言より後に実行される)
・・・・・
H = $("#container").height(); // 定義済みのグローバル変数Hに値を代入
・・・・・
});
などで、代入可能です。
var H の宣言は行なわなくても、function内にHが出てきた時点でグローバルとして定義されるので、省略しても同じことにはなりますが、事前に宣言しておいた方がわかりやすいかと。
この場合、var H を $(function(){ ~ }); の後に記述しても同じです。(理由は考えてください)
No.4
- 回答日時:
#3です。
だいぶ誤解なさっている部分があるようです。
>一旦jQueryを閉じてしまうと、やはり値を取得できませんでした。
$(function(){ })内だけがjqueryに関係すると思ってらっしゃるようですが、まったく関係ありません。
ダイレクトに
alert($(window).width());
としても、(function外でも)ちゃんと動作するはずです。
通常はコードを $(function()内に記述するのは、要素が定義されてからでないと要素の取得や操作ができないからで、 $(function(){ は jQuery(document).ready(function(){ のショートハンドになっています。
>やはり値を取得できませんでした。
>$(function(){var H = $("#container").height();});
>$(function(){alert(H);});
$(function(){ を複数設定した場合、実行順序は不定(だったと思います)ので実行順を制御できません。
また、上記の例では最初の行でvar宣言を行なっているので、Hはそのfunction内のみのスコープとなるために、別のfunctionからは参照できなくるために未定義となっているだけです。
このために起きている事象ですので、functionの内外とは直接関係ありません。スコープと実行順序を正しく制御できていれば、取得できるはずです。
>下記も値を取得できずundefinedとなっていました。
>var H;
>$(function(){var H = $("#container").height();});
>$(function(){alert(H);});
変数のスコープについて調べてみてください。
最後の行のalert(H)は最初のvar H宣言されただけの変数を参照しているので、undefinedとなります。
2行目のHはfunction内のみのスコープなので、外部からは参照できませんし、最初のHとは別の変数として扱われます。(理由は前述)
>こちらのやり方をうっかりしていました
まだ、意味が正しく通じていないようです。
通常は$(function(){ を複数書くようなことはしません。
なぜなら、先にも書きましたように、実行順序の制御ができなくなるからです。
$(function(){ の意味や変数のスコープについて理解なさるようにした方が後のためにもよろしいかと思います。
この回答への補足
何度もご回答ありがとうございます。
$(function())内だけがjQueryではないんですね!
alert($(window).width());を試しましたところ、確かに動作しました。
スコープについては何となく知っていますが、実験的な意味で色々やってみました。
var H = $("#container").height();を<div id = "container"></div>の後に記述したところ、
値を取得できました。
そこで、var H = $("#container").height();を#containerよりも前にグローバルで記述する場合、#containerが読み込まれてから値を取得するためには、どのようにすればよいでしょうか。
次から次へと大変申し訳ございませんが、もしお時間ございましたら、よろしくお願いいたします。
No.3
- 回答日時:
#2です。
>$("#footer").css("top" , $("#contents").height());
>とした場合は問題なく機能しました。
よくわかりませんが、変数Hに値を取得するタイミングの問題ではありませんか?
ご提示の書き直したケースでは、その処理のタイミングでheight()を取得しています。
同じ要領で、
H = $("#contents").height(); $("#footer").css("top" , H);
とすれば、動作するのではないかと推測します。
(Hを取得した時にまだ値が決まっていなかったり、途中でHが書き換えられているとか)
>jQueryでグローバル変数を設定することはできないのでしょうか。
普通に可能です。
グローバルで、
var H = $("#contents").height());
としたり、
var H;
と宣言しておくことで、グローバルな変数として設定できます。
(通常は、他のスクリプトとバッティングすることを予防するために、グローバル変数を避けたりしますが…)
また、function内であっても変数宣言をせずに
H = $("#contents").height());
などとすれば、グローバル変数として扱われるはずです。
この回答への補足
ご返信遅くなりまして申し訳ございません。
何度もありがとうございます。
下記のケースにおいて、当たり前かもしれませんが、一旦jQueryを閉じてしまうと、やはり値を取得できませんでした。
$(function(){var H = $("#container").height();});
$(function(){alert(H);});
>グローバルで、var H = $("#contents").height());としたり、var H;と宣言しておくことで、グローバルな変数として設定できます。
こちらに関しては、代入する部分がjQueryなので、グローバルで宣言しても動作しませんでした。
また、下記も値を取得できずundefinedとなっていました。
var H;
$(function(){var H = $("#container").height();});
$(function(){alert(H);});
>また、function内であっても変数宣言をせずにH = $("#contents").height());などとすれば、グローバル変数として扱われるはずです。
こちらのやり方をうっかりしていました。問題なくグローバルで変数となりました。
No.2
- 回答日時:
ご提示の方法でも指定できるはずです。
考えられる原因としてHに有効な値を取得できていないのではないかと推測します。
var H = $("#contents").height();
alert(H);
とでもして、値が取れているか確認してみてください。
ありそうなのは、$("#contents")が存在しないとか・・・
この回答への補足
早速ご回答いただきましてありがとうございます。
上記の場合、
alert(H);とするとnullが返ります。
しかし、
$("#footer").css("top" , $("#contents").height());
とした場合は問題なく機能しました。
また、
var H = $(windows).height(); の場合は
$("#footer").css("top" , H); でも問題なく動いています。
以上、何卒よろしくお願いいたします。
本件について、alert();の記述場所を変えながら、問題の箇所が判明しました。
変数の定義と関数の実行が違う$(function(){});内にあることによるものでした。
ありがとうございました。
そこで、基礎的なことで大変恐縮ですが、
jQueryでグローバル変数を設定することはできないのでしょうか。
もしよろしければ、お教えいただけますと幸甚です。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
idを使わずにonclickで自身の要...
-
functionから別のfunctionを実...
-
関数でy=g(x)のgとは何の略です...
-
javascript(jQuery)でセル内...
-
Javascriptの変数がうまく渡せ...
-
JavascriptのFunctionの構文に...
-
一つのアクションで関数を二つ...
-
phpでの文字の点滅表示
-
[Delphi]入れ子(?)になったプロ...
-
jQueryの導入について
-
Javascriptで引数の参照渡しか...
-
jQueryでのレスポンシブが綺麗...
-
同じIDで定義した要素の配列を...
-
window.openでタイトル名の指定
-
<a>タグのテキストを取得
-
C#で、ContextMenuStripに動的...
-
Vb.netのグローバル変数の宣言...
-
ジェネレーターの作り方
-
Linux バイナリ実行できない "...
-
ActiveXobjectが作成できない
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
関数でy=g(x)のgとは何の略です...
-
idを使わずにonclickで自身の要...
-
functionから別のfunctionを実...
-
jQueryの :not() .not() が有効...
-
処理前の「お待ちください」
-
jslintのエラーについて質問
-
XMLHttpRequestでキャッシュを...
-
クリックすると上に開くアコー...
-
コードをスマートにさせたい。
-
関数名をテキストから読み込む...
-
jqueryの変数を関数の外に出す方法
-
シューティングゲームの作り方
-
要素名がスペースを含む場合のj...
-
getElementByIdを使用したグロ...
-
XMLHttpRequestオブジェクトが...
-
jQueryが読み込めない
-
Ajaxでデータベース(PostgreSQL)
-
setTimeoutで、止まらない
-
jQueryでzipを解凍読み込みする...
-
CDの曲をケータイのSDに移す
おすすめ情報