BOOK Studio947
狩野祐東・狩野さやか著書

返信先: var $shade = $(‘.js-slidemenu-effect’)[0];の[0]について

トップページ 書籍 Q&A HTML5&CSS3デザインレシピ集:Q&A var $shade = $(‘.js-slidemenu-effect’)[0];の[0]について 返信先: var $shade = $(‘.js-slidemenu-effect’)[0];の[0]について

#3241
hiro
ゲスト

再度の返信を頂いてありがとうございます。
今回の返信を頂いて、ハンバーガーメニューとシェード効果の
通常の動きは大体分かりましたが、調べてみると別のことも分かってきました。

console.log($shade);で[]がない時には
Object { length: 0, prevObject: Object[1] }になっていました。
これで0で取らないといけないことが分かりました。

あとは、-1を入れるとundefinedにずっとなるのでハンバーガーメニューを
クリックするとjQueryのCSS生成のシェード効果で画面が黒くなっていきます。
この時にindex.htmlを見ると<div class=”js-slidemenu-effect”></div>が
</body>直前にずらっと追加されています。
この追加されている分だけのシェード効果が画面に追加されています。
シェード効果の画面をクリックすると、
<div class=”js-slidemenu-effect”></div>が削除される度に
画面のCSSの黒の効果がなくなっていっています。

0を1にすると、1つの<div class=”js-slidemenu-effect”></div>がindex.htmlに残っているので、
その分画面が暗くなったままですが、シェード効果の黒い部分をクリックすると削除できて
元の画面に戻っています。

こういうことをしているうちに理解できるようになりましたが、
これはconsole.log($shade);を使ったから分かりました。

$(‘.js-slidemenu-effect’);でjQueryで新しく生成する時には
length: 0になるので、$(‘.js-slidemenu-effect’)[0];にしないといけないと
いうのは、jQueryの入門書も数冊読みましたが、この内容は載ってなかったと思います。
この件は、どのくらいの段階の内容なのかも気になりました。

あとは、prevObject: Object[1]というのは、配列で最初が0からなら
0になっているはずが、1になっているのがよく分かりませんでした。

しかし、随分と理解できるようになったので、感謝しています。
『いちばんよくわかるHTML5&CSS3デザインきちんと入門』も購入して読みましたが、
この本は入門とありますが、それ以上の内容で2回読み通して、読み応えのある内容で
htmlとcssの理解がかなり深まりました。