javascript - 如何将弹出窗口的图像传递到jquery而不进行硬编码

Question

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

现在，如果从数组中获取 10 个项目，我会显示 10 个图像，但是当我单击任何图像(包括第一个图像)时，只有数组中的第一个图像会填充弹出 div。

我根据我当前的 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上获取图片源并将其放入弹出窗口吗？

要获取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
    }
}

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