Question

我正在学习jQuery，我需要弄清楚如何不进行硬编码。所以我有两个不同的div（master和popup）由一个数组填充。第一个div（主）是可见的，我用作弹出窗口的第二个（弹出窗口）是隐藏的。在视图中，您在div（主）中看到一个图像，当它被单击时，我有一个jQuery函数触发隐藏的div（弹出窗口）以显示。

现在如果从阵列中获得10个项目，我会显示10个图像，但是当我点击任何图像（包括第一个）时，只有阵列中的第一个图像填充弹出div。

我硬编码了一个＆＃39;修复＆＃39;基于我目前的jQuery知识，但这是重复的代码，这意味着我只能在我的jQuery中声明div的数量。我需要找到一种方法，每个图像显示它的相应弹出窗口，而不必一直硬编码

我的HTML代码：主人：

<div class="master">
 <div id="imgprop"><img src="IMGCOMP/bgggg.jpg" alt="Gallery Image" height="238" width="238" /></div>
 <div id="ps1" class="popit1" #hard coded popit id>
  <section>
   <span>IMAGE TITLE</span>
   <span id="zoom"></span>
  </section>
 </div>
</div>

<div class="master">
 <div id="imgprop"><img src="IMGCOMP/bgg.jpg" alt="Gallery Image" height="238" width="238" /></div>
 <div id="ps1" class="popit2" #hard coded popit id>
  <section>
   <span>IMAGE TITLE</span>
   <span id="zoom"></span>
  </section>
 </div>
</div>

弹出式div：

<div id="GbgPopup1" #hard coded gbpopup id>
 <div id="GPopupcontent">
  <div class="closeit"></div>
  <span class="ecs_tooltip_">Press esc to close <span class="arrow"></span></span>
  <div class="image">
   <img src="IMGCOMP/bgggg.jpg" alt="Gallery Image" height="400" width="430" />
  </div>           
 </div>
</div>

<div id="GbgPopup2" #hard coded gbpopup id>
 <div id="GPopupcontent">
  <div class="closeit"></div>
  <span class="ecs_tooltip_">Press esc to close <span class="arrow"></span></span>
  <div class="image">
   <img src="IMGCOMP/bgg.jpg" alt="Gallery Image" height="400" width="430" />
  </div>           
 </div>
</div>

我的jQuery代码：

jQuery(function($) {
    #hard coded
    $(".popit1").click(function() {
            setTimeout(function(){ // then show popup, deley in .5 second
            loadPopup1(); // function show popup
            }); // .5 second
    return false;
    });
    $(".popit2").click(function() {
                setTimeout(function(){ // then show popup, deley in .5 second
                loadPopup2(); // function show popup
                }); // .5 second
        return false;
        });


    /* event for close the popup */
    $("div.closeit").hover(
                    function() {
                        $('span.ecs_tooltip_').show();
                    },
                    function () {
                        $('span.ecs_tooltip_').hide();
                    }
                );

    $("div.closeit").click(function() {
        disablePopup();  // function close pop up
    });

    $(this).keyup(function(event) {
        if (event.which == 27) { // 27 is 'Ecs' in the keyboard
            disablePopup();  // function close pop up
        }
    });


  var popupStatus = 0; // set value
  #hard coded
  function loadPopup1() {
        if(popupStatus == 0) { // if value is 0, show popup
            $("#GbgPopup1").fadeIn(0500); // fadein popup div
            popupStatus = 1; // and set value to 1
        }
    }
    function loadPopup2() {
            if(popupStatus == 0) { // if value is 0, show popup
                $("#GbgPopup2").fadeIn(0500); // fadein popup div
                popupStatus = 1; // and set value to 1
            }
        }

    #hard coded
    function disablePopup() {
        if(popupStatus == 1) { // if value is 1, close popup
            $("#GbgPopup1").fadeOut("normal");
            $("#GbgPopup2").fadeOut("normal");
            popupStatus = 0;  // and set value to 0
        }
    }
});

欢迎使用每个帮助和更多jQuery资源来帮助提高我的知识

Answer 1

我希望我理解你的问题。你想知道如何从master获取图片源并将其放入弹出窗口吗？

要获得图片的src，你可以这样做：

$(".popit").click(function() {
        setTimeout(function(){ // then show popup, deley in .5 second
        loadPopup(this); // function show popup
        }); // .5 second
        return false;
});

function loadPopup(clickedElement) {
    if(popupStatus == 0) { // if value is 0, show popup
        // first find the img tag from master
        var imgSrc = $(clickedElement).parent().find("img").attr("src");
        var popup = $("#GbgPopup");
        popup.find("img").attr("src", imgSrc);
        popup.fadeIn(0500); // fadein popup div
        popupStatus = 1; // and set value to 1
    }
}

如果代码中有错误，我很抱歉，我没有运行它。我相信您可以再次从代码中删除硬编码部分。

Answer 2

创建一个主div并使用http://api.jquery.com/appendto/动态生成每个只传递图像和计数器的弹出窗口

即：

function generatePop(image, counter) { var html = '<div class="ecs_tooltip_" id="pop"'+counter+"><img src=... </div>'; $(html).appendTo('#master-div'); }

如何在没有硬编码的情况下将弹出窗口的图像传递给jquery

2 个答案: