Всплывающие окна Jquery с load()
Вопрос
У меня есть несколько разных div с разными проектами и именами.Каждый из них имеет уникальное имя, и я бы хотел, чтобы, когда пользователь нажимает на него, загружалась соответствующая страница в popupContainer
дел.Хотя почему-то не звонит.
Это JQuery:
$(document).ready(function(){
//Find & Open
$(".projectThumb").click(function(){
htmlName = $(this).find("img").attr("name");
$("#popupContainer").load(htmlName + ".html");
});
//Close property
$("a.close").live("click", function(){
$("#popupContainer").empty();
});
});
Это HTML:
<div id="content">
<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 class="projectThumb">
<img src="/img/lova_button_static.gif" width="229" height="199" class="button" name="lova" alt="" />
<p class="title">Lova – Summer 07’ – Titles</p>
</div>
</div>
<div id="popupContainer"></div>
Решение
Вы не закрываете функцию первого щелчка и неправильно открываете ready (function () {...})
:
$(document).ready(function(){ // <-- added missing open parens
//Find & Open
$(".projectThumb").click(function(){
htmlName = $(this).find("img").attr("name");
$("#popupContainer").load(htmlName + ".html");
}); // <-- added needed closing function
//Close property
$("a.close").live("click", function(){
$("#popupContainer").empty();
});
});
Другие советы
Ярлык
<img ... >
не имеет атрибута "имя" (только форма и ее компоненты), используйте "id" :)
Вы не закрываете функцию первого клика.
$(document).ready(function){
//Find & Open
$(".projectThumb").click(function(){
htmlName = $(this).find("img").attr("name");
$("#popupContainer").load(htmlName + ".html");
}); <-- needed
//Close property
$("a.close").live("click", function(){
$("#popupContainer").empty();
});
});
Не связан с StackOverflow