Question

所以我对编程很新，我一直在努力寻找解决我面临的许多问题的方法。总的来说，事情已经开始落到实处，但有时事情只会让我感到非常伤心。就像现在一样。我正在为我女朋友的艺术网站制作一个简单的灯箱。我已经想出如何使用php将图像放入列表中。弄清楚如何使用Jquery将图像包装在锚点中，并弄清楚如何使覆盖屏幕上出现叠加层。一切都进展顺利，直到过去的图像显示为“未定义”，如http://www.mysite.com/JPG/undefined 我想我已经把变量搞砸了，但无论我怎么努力，我似乎都看不出问题。你们中的任何一个人能帮助一个菜鸟吗？这是不起作用的jquery。如果您需要代码的其他部分，请询问。

$("document").ready(function(){
$(".gallimg").wrap(function(i) {
    var num = i+ 1;

    return "<a href='includes/JPG/"+ num + ".jpg'>"+"</a>"; });

$('.gallimg').click(function(e){
                    //Prevent Default Action (follow link)
                    e.preventDefault();
                    //Get clicked link href
                    var image_href = $(this).attr("href");

                    if ($('#overlay').length > 0) { // #overlay exists
                    //insert img tag with clicked link's href as src value
                    $('#contentov').html('<img src="' + image_href + '" />');
                    //show overlay window 
                    $('#overlay').show();
                    } 
                    else{ //#overlay does not exist
                        //create HTML markup for overlay window
                        var overlay =
                            '<div id="overlay">' +
                            '<p>Click to close</p>' +
                            '<div id="contentov">' +
                            //insert clicked link's href into img src
                            '<img src="' + image_href +'" />' +
    '</div>' +
'</div>';
//insert overlay HTML into page
$('body').append(overlay);


}
$('#overlay').click(function() {
                $('#overlay').hide();
            });
});

                                });

所以有任何想法吗？

这是生成html的php

<?php // Find all files in that folder

$files = glob('includes/JPGsm/*');

// Do a natural case insensitive sort, usually 1.jpg and 10.jpg would come next to each         other with a regular sort
natcasesort($files);

// Display images
foreach($files as $file) {
    echo '<img src="' . $file . '" class="gallimg"/>'  ;
}
?>

否则这是包含所有内容的PHP文件....对不起，如果我不提供所需的信息。正如我所说，我是新人。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<meta name="description" content="" />

<meta name="keywords" content="" />

<meta name="author" content="" />

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<title>Heather Wyatt -- Inspiring | Creating | Discovering</title>

</head>

<body>

        <div id="wrapper">

                <?php include('includes/header.php'); ?>

                <?php include('includes/nav.php'); ?>

            <div id="gallery">

                <?php include('includes/gallery.php'); ?>

            </div> <!-- end #gallery -->
        </div> <!-- End #wrapper -->
    <?php include('includes/scripts.php'); ?>
    <script type="text/javascript" src="includes/gallery.js"></script>
</body>

</html>

Answer 1

如果是src，则应该照看href，而不是var image_href = $(this).attr("src");。

试试这个：.prop

您可以使用.attr代替href，您可以阅读 here 原因。

如果您正在寻找可以使用parent的{{1}}的{{1}}：

img

检查 this 演示，先得到图像src，然后是href。

图像SRC属性“未定义”

1 个答案: