如何在不进行硬编码的情况下将弹出图像传递到 jquery

Question

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

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

我根据我目前的 jQuery 知识对 'fix' 进行了硬编码，但这是重复代码，这意味着我只能在 [=] 中声明 div 的数量36=]。我需要找到一种方法，让每个图像都能显示其相应的弹出窗口，而不必一直硬编码

我的 html 代码：硕士div:

<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

创建一个母版 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'); }

Answer 2

希望我理解你的问题。想知道怎么把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
    }
}

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

Answer 3

看到 Martin 的回答后，我能够更深入地研究 jQuery 并调整他的回答以使其有效。

我所做的只是将 loadpopup() 函数中的代码移动到父 .click() 函数中，将 div(master) 的 $(".popit").click 更改为 $(".master").click 有效地 select 整个 div，使用了 $(this) 这样我就可以在 master div 中获得当前点击的 img 然后替换 src 在弹出窗口中 div

var popupStatus = 0; // set value

$(".master").click(function() {
        var imgSrc = $(this).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          
//return false;
});

如何在不进行硬编码的情况下将弹出图像传递到 jquery

how to pass image for popup into jquery without hard coding

html

javascript

parameters

jquery