インデックスページ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>