Question

我正在使用this photo gallery from 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

问题是您放在页面上的图像与面板中加载的图像元素不同。您应该在内容区域中搜索与您要删除的面板中的图像具有相同网址的匹配图像，然后获取它的alt属性。 [你真的需要alt还是你不能从src中弄清楚服务器上的目录是什么？如果是这样，这将使您不必再进行第二次查找;你可以从面板图像中传回网址。]

/* 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

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

Answer 3

我不知道所有其他的混乱，但要获得被点击的图像的路径只是这样做：

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

获取当前图像的路径 - jQuery

3 个答案: