インデックスページindex.php
があり、ユーザーがプロジェクトをクリックすると(この質問のために、プロジェクトがと呼ばれるhtmlページに含まれているとしましょう)、 divaeffect.html
にロードされます。aeffect.html
<div id="popupContainer"></div>
に含まれていindex.php
ます。
ただし、には多くのプロジェクトがありindex.php
、これらの各プロジェクトには閉じるボタンがあります。popupContainer
この変数を空にリセットして消えることを期待して、この変数を使用して空にしようとしましたaeffect.html
。
//Close property
$("a.close").click(function(){
$("#popupContainer").empty();
});
これはうまくいかないようです、私はこれをどのように機能させるのか正確にはわかりません。aeffect.html
からのアクションがdivを制御できるようにする方法はありindex.php
ますか?
これが完全なjqueryです:
$(document).ready(function() {
//Find & Open
$(".projectThumb").click(function(){
$("#popupContainer").load("/aeffect.html");
});
//Close property
$("a.close").click(function(){
$("#popupContainer").empty();
});
});
これがindex.phpのhtmlです
<div id="container">
<div class="projectThumb">
<img src="/img/aeffect_button_static.gif" width="146" height="199" class="button" name="aeffect" alt="" />
<p class="title">A.EFFECT: Film Poster</p>
</div>
</div>
<div id="popupContainer"></div>
およびaeffect.htmlのhtml
<div class="projectPopup" id="aeffect">
<a class="close">Close ×</a>
<img src="/img/aeffect_popup.jpg" width="500" height="729" alt="" />
<p class="description">Description</p>
</div>