获取当前图片的路径-jQuery

Question

我正在使用 这个来自 Codrops 的照片库 显示图像。我添加了一个按钮来删除单击[并放大]的当前图像。但是，这不会删除单击的图像，但会删除相册中的第一张照片。

如何获取被点击的图像的图像路径[即当前图像]？

这是我添加到图库脚本中的 jQuery 代码：

var image = $('#photos').attr("alt");

                /* If delete is called */
                $('#adelete').click(function(){
                //create post data
                    var postData = { 
                        "image" : image
                };

                    //make the call
                    $.ajax({
                        type: "POST",
                        url: "delete.php",
                        data: postData, 
                        success: function(data){
                        alert("Image deleted successfully! " +image+data);  
                        }
                    });
                });

PHP:

<?php 
    $image = $_REQUEST['image'];
    if (isset($image)) {
        unlink($image);
        echo "Success";
    }
?>

'photos' 是图像的 ID。

echo "<img id='photos' src='/thumbs/$image' alt='$dirname/$image' />"; 

如果我在画廊代码中使用 var image = $('#wrapper img').attr("alt"); ，它会给出 undefined 错误并且没有图像被删除。我假设这是因为放大的图像是在运行时加载的。

Answer 1

问题是您放置在页面上的图像与面板中加载的图像元素不同。您应该在内容区域中搜索与要删除的面板中的图像具有相同 URL 的匹配图像，然后获取其 alt 属性。 [您真的需要 alt 还是您无法从 src 中找出服务器上的目录是什么？如果是这样，那么您就不必进行第二次查找；你可以直接从面板图像传回 url。]

/* If delete is called */
$('#adelete').click(function(){
    var src = $('#wrapper img').attr('src');

    var image = $('#content img:has([src="' + src + '"])').attr('alt');

    //create post data
        var postData = { 
            "image" : image
    };

    //make the call
    $.ajax({
        type: "POST",
        url: "delete.php",
        data: postData, 
        success: function(data){
        alert("Image deleted successfully! " +image+data);  
        }
    });
});

Answer 2

我不知道所有其他混乱，但要获取单击的图像的路径，只需执行以下操作：

$('#photos').click(function() {
  var path = $(this).attr('src');
});

Answer 3

您需要将 var image = $('#photos').attr("alt"); 放入 .click(...) 中