使用JQuery来激活使用图像名称的弹出框

Question

我想用JQuery来管理一些弹出窗口。我正在构建的这个页面将包含15个项目，每个项目都是包含在DIV中的缩略图。每个DIV都有一个Name属性，所以我想让JQuery找到DIV的名称并激活ID中包含的相同名称的隐藏弹出框...

目前我有三个名称不同的“projectThumb”DIV和三个不同的“projectPopup”DIV，其名称与“projectThumb”DIV相同，但放置在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 = ""; 
}); 
}); 

在ID中使用点是一个坏主意，因为当您尝试$("#a.effect")时，将不会选择任何内容，因为jQuery会查找ID为"a"和类别"effect"的DOM元素。

如果您可以将点更改为其他值，则选择器将是$("#"+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)); 
    }); 
});