Использование JQuery для активации всплывающего окна с использованием имени изображения

Question

Я пытаюсь использовать JQuery для управления несколькими всплывающими окнами. Эта страница, которую я создаю, будет состоять из 15 проектов, каждая из которых представляет собой миниатюру, содержащуюся в DIV. Каждый DIV имеет атрибут Name, поэтому я хотел бы, чтобы JQuery находил имя DIV и активировал скрытое всплывающее окно с тем же именем, которое содержится в ID ...

В настоящее время у меня есть три DIV-проекта ProjectThumb с разными названиями и три разных DIV-проекта projectPopup с теми же соответствующими именами, что и DIV «projectThumb», но помещены в тег ID.

HTML код:

<div class="projectThumb"> 
<img src="/img/a.effect_static.gif" class="button" name="a.effect" alt="" /> 
<p class="title">A.EFFECT: Film Poster</p> 
</div> 

<div class="projectPopup" id="a.effect"> 
<a class="close">Close &times;</a> 
<img src="/img/a.effect_popup.jpg" alt="" /> 
<p class="description">Description</p> 
</div> 

JScript и JQuery код:

var popupStatus = 0; 

function loadPopup(){ 
    if(popupStatus==0){ 
     $(".projectPopup").show(); 
     popupStatus = 1; 
    } 
} 

function closePopup(){ 
    if(popupStatus==1){ 
      $(".projectPopup").hide(); 
      popupStatus = 0; 
    } 
} 

$(document).ready(
    function(){ 
      var findProject = $(".projectThumb").find('img').attr('name'); 
      $(".projectThumb", this).click(function(){ 
        loadPopup(); 
        }); 
    }); 

Answer 1

Я предлагаю использовать этот:

$(document).ready(function(){; 
$(".projectPopup").hide(); 
var actualOpenID = ""; 
$(".projectThumb").click(function(){ 
    if (actualOpenID !== "") { 
     $("div[id="+actualOpenID+"]").hide(); 
    } 
    var newID = $(this).children("img").attr("name"); 
    $("div[id="+newID+"]").show(); 
    actualOpenID = newID; 
}); 

$("a.close").click(function (e) { 
    e.preventDefault(); 
    $(this).parent().hide(); 
    actualOpenID = ""; 
}); 
}); 

BTW с использованием точки в ID - плохая идея, потому что при попытке $("#a.effect") ничего не будет выбрано, потому что jQuery ищет DOM-элемент с идентификатором "a" И КЛАССОМ "effect".

Если вы могли бы изменить точку на что-то еще, Селектор будет $("#"+newID) вместо $("div[id="+newID+"]").

В приведенном выше примере всплывающее окно также будет закрыто, если кто-то нажмет на другое изображение projectThumb.

Answer 2

Я думаю, вам просто нужно двигаться, что findProject код немного:

function loadPopup(thumbDiv) { 
    if(popupStatus == 0) { 
    var findProject = thumbDiv.find('img').attr('name'); 
    $(findProject).show(); 

    // or without the variable 
    $(thumbDiv.find('img').attr('name')).show(); 

    //$(".projectPopup").show(); 
    popupStatus = 1; 
    } 
} 

function() { 
    $(".projectThumb", this).click(function() { 
    loadPopup($(this)); 
    }); 
});