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

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

1 голос
/ 30 августа 2009

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

В настоящее время у меня есть три 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();
                    });
    });

Ответы [ 2 ]

1 голос
/ 30 августа 2009

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

$(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 = "";
});
});

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

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

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

1 голос
/ 30 августа 2009

Я думаю, вам просто нужно немного переместить этот код 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));
  });
});
...