jQueryの否定疑似クラスが効かない

質問

いつも、こちらでお世話になっているものです。

日々、jQueryと格闘中でして、
またまたjQuery関連で分からないところが出てきてしまいました。

ボタンを配置していて、そのボタンをクリックしたら
lightbox風にコンテンツが表示されるようにしています。
(表示コンテンツは以下スクリプトで言うとdiv.overLayerContents)

表示は問題なくできるのですが、
そのあとに、コンテンツ部分以外をクリックしたら
hide()させるように以下のように設定してみました。

ですが、コンテンツ部分をクリックしてもhide()が実行されるのです。
例えば、pとかliとかをクリックしても、hide()が実行され、閉じてしまうのです。

否定疑似クラスをつけず、
#overLayerだけにすると、一応、hide()は機能するので
多分、否定疑似クラス:not～がうまく機能していないみたいなんです。

以下、スクリプトを書きましたので、
詳しい方、ご教授下さい。

どうぞ宜しくお願いいたします。

▼スクリプト
----------------------
$(function(){
　$("#glayLayer , #overLayer:not(.overLayerContents)").click(function(){
　　$("#glayLayer").hide();
　　$("#overLayer").hide();
　});

　$("#btn").click(function(){
　　$("#glayLayer").show();
　　$("#overLayer").show().css("marginTop","5px");
　　return false;
　});
});

▼html
----------------------
<div id="glayLayer"></div>
<div id="overLayer">
　<div class="overLayerContents">
　　<p>タイトル</p>
　　<ul>
　 <li>コンテンツ1</li>
　 <li>コンテンツ2</li>
　 <li>コンテンツ3</li>
　　</ul>
　</div>
</div>

<div id="btn">ボタン</div>
----------------------
※#glayLayer , #overLayerとも、
最初にcssでdisplay:noneにしています。

回答No.3

tracer · ベストアンサー

ちょっとよくわかってないのですが、もし、本当にconsole.logで期待する要素を取れているのを確認できているのであれば、質問タイトルの「jQueryの否定疑似クラスが効かない」は、解決してると思うのですが。。つまり、否定擬似クラスは正常に作動しているわけです。
ただ、個人的には、ほんとに取れているのかな。。とは思いますが。

お礼

度々のアドバイスをありがとうございます。
console.logがきちんと取得できているか、
本当に期待する要素として間違いないかを、もう一度確認してみます。

勉強させていただきました。
ありがとうございました。

回答No.2

tracer

#1の追記です。

ちなみに、console.logはご存知ですか？
console.logを使うと、オブジェクトの中身を確認できるので、たとえば、jQueryセレクタで選択したものが、期待する要素なのかを確認することができますよ。

console.log($("#overLayer"));

console.logで確認できれば、今回の場合は、クリックした結果で判断しなくても済みますし、原因の特定も早いと思います。

お礼

console.log　という機能、やってみました。
教えてくださりありがとうございます。
でも、これで見ると、問題なく期待するオブジェクトを指しています。

もう少し、いろいろやってみます。

重ね重ね、ありがとうございます。

回答No.1

tracer

セレクタの使い方が間違っています。
が、期待している選択ががいまいちわかりません。

ちなみに、$("#glayLayer , #overLayer:not(.overLayerContents)")は、
IDがglayLayerの要素と、IDが#overLayerかつクラスがoverLayerContentsでない要素を同時に選択しています。IDが#overLayerかつクラスがoverLayerContentsでない要素は存在していませんよね。何を選択しようとしたのか、具体的に日本語で書いてもらえると、回答が出やすいと思います。

補足

すみません

説明不足でした。

＃glayLayer
↓
windowサイズと同じサイズでwidth:100%,height:100%にしています。

＃overLayer
↓
position:fixedで配置
こちらはwindowサイズと同じでないです。
（＃glayLayerと#overLayerはレイヤーみたいに重なっています。）

※これは中のコンテンツ(.glayLayerContents)を
cssでmargin: 0 auto;で中央に配置するために置いています。

.overLayerContents
↓
#overLayerの中の子要素
#overLayerの要素内の一部で、中央に配置

※つまり、3つの要素は重なりあっています。

やりたいことは、
“class=overLayerContentsでない所”をクリックしたら
＃glayLayer と　#overLayerを非表示にしたいんです。

もしお分かりになりましたら、どうぞ宜しくお願いいたします。