2011-05-08 240 views
1

我正在使用this photo gallery from Codrops來顯示圖像。我添加了一個按鈕來刪除當前點擊[和放大]的圖像。但是,這並不會刪除被點擊的圖像,但會刪除相冊中的第一張照片。獲取當前圖像的路徑 - jQuery

如何獲得點擊圖像的圖像路徑[即當前圖像]?

這是我添加到畫廊腳本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"; 
    } 
?> 

'照片' 是圖像的ID。

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

如果我使用var image = $('#wrapper img').attr("alt");在畫廊的代碼,它提供了一個undefined錯誤和沒有圖像被刪除。我假設這是因爲放大的圖像在運行時加載。

+0

嘗試'var image = $('#photos')。prop(「alt」);'在您的'.click(...) '(jQuery v1.6) – diEcho 2011-05-08 14:42:01

+0

做到了。它將刪除相冊中的第一張照片,而不是縮略圖被點擊的圖像。 – input 2011-05-08 14:58:40

回答

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); 
     } 
    }); 
}); 
+0

非常感謝你的指針!我沒有意識到圖像元素的src屬性隨着面板中的完整圖像的加載而改變。我將alt更改爲'#wrapper img'元素的src,並且做到了這一點。 – input 2011-05-08 15:27:28

0

你需要把你的var image = $('#photos').attr("alt");.click(...)

+0

'.click'照片事件或刪除按鈕?這個畫廊的工作方式是,點擊縮略圖圖像,它加載完整的圖像。在點擊完整圖像時,它會返回到顯示縮略圖圖像的相冊。 – input 2011-05-08 14:54:16

0

裏面我不知道所有其他的亂七八糟,但要獲得被點擊圖像的路徑只是這樣做:

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

也可以使用'$(this).prop(「src」)'從jQuery v1.6 – diEcho 2011-05-08 14:40:55

+0

我試過了代碼,它沒有工作。這個畫廊的工作方式是,點擊縮略圖圖像,它加載完整的圖像。在點擊完整圖像時,它會返回到顯示縮略圖圖像的相冊。 – input 2011-05-08 14:55:19