同一クラスからクリックされた要素の兄弟要素のみを取得したいです

Question

前提・実現したいこと

サイト内に、画像を複数並べて、各画像をクリックするとその画像の詳細がモーダル表示されるようにしたいです。

発生している問題・エラーメッセージ

しかし画像をクリックすると全ての画像の詳細がモーダルでフェードインしてしまいます。（モーダルは全て同じclassを使用しています。）

該当のソースコード

HTML
<img class="openModal">
<div class="modalArea">
<div class="modalBg"></div>
<div class="modalWrapper">
<div class="modalContents">テキスト</div>
<div class="closeModal">×</div>
</div>
</div>

jQuery

$(function () {
$('.openModal').click(function(){
$(this).next('.modalArea').fadeIn();
});
$('.closeModal , .modalBg').click(function(){
$('.modalArea').fadeOut();
});
});

Comments

[webgoto]

現状のコードで正しく動作していませんか?
https://jsfiddle.net/zwya0egp/

[dakodako]

ありがとうございます！jsファイルを再読み込みしたら行けました！
保存せずにプレビューしてたと思います、、凡ミスですみませんでした。。。

[Lhankor_Mhy]

ご解決でしたら、自己解決の処理をお願いします。

Answer 1

jsファイルを保存せずにプレビューしている凡ミスでした。。。お騒がせしてすみません、、。