使用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)); 
    }); 
});