图像 SRC 属性“未定义”答案

【问题标题】：Image SRC attribute "undefined"图像 SRC 属性“未定义”
【发布时间】：2013-07-26 00:20:42
【问题描述】：

因此，总的来说，我对编程还很陌生，而且我一直在努力寻找解决我面临的许多问题的方法。总的来说，事情已经开始到位，但有时事情绝对让我难过。比如现在。我正在为我女朋友的艺术网站制作一个简单的灯箱。我已经想出了如何使用 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>

【问题讨论】：

请同时发布您的 html，以便我们更好地回答。
这就是你想要的吗？
是的，我更新了答案。

标签： jquery image variables undefined src

【解决方案1】：

如果src 是图片，您应该注意它，而不是href。

试试这个：var image_href = $(this).attr("src");

你可以用.prop代替.attr，你可以看看here为什么。

如果您正在寻找href 的parent 的img，您可以使用：

var image_href = $(event.target).parent().attr("href");

检查 this 演示，您是否首先获得图像 src，然后是 href。

【讨论】：

在当前版本的 jQuery 中，在这个例子中，.attr() 是正确的。 .prop() 用于在不更改 DOM 的情况下可以更改的质量，例如 checked。
@Blazemonger，是的，你是对的。我刚刚纠正了这一点。谢谢。
这种方法有效。它使缩略图出现而不是链接到的图像。我真的很感谢您的快速回复。
工作出色。非常感谢