jQuery UI的調整大小，獲得圖像的屬性值被調整

Question

這是我的形象：

echo "<img src='articles/$article_id/$image' style='width:inherit;' id='image' data-articleid='$article_id' data-boxid='$box_id'>"; 

的Jquery：

<script type="text/javascript"> 
$(document).ready(function() { 
var startW = 0; 
var startH = 0; 

$('#image').resizable({ 
    start : function(event,ui) { 
     startW = $(this).outerWidth(); 
     startH = $(this).outerHeight(); 
    }, 
    stop : function(event,ui) { 
     w = $(this).outerWidth(); 
     h = $(this).outerHeight(); 

     boxid = $(this).attr("data-boxid"); 
     articleid = $(this).attr("data-articleid"); 

     $.post("processforms/process_techtools.php", { boxid:boxid, articleid:articleid, width:w, height:h, resize_image_submit:0}, function (data) {  
      $("#progress").hide();    
      $("#success").show().fadeOut(1500);   
     });  
    } 
}); 
}); 
</script> 

在可調整大小的停止功能，boxid和條款ArticleID回報不確定。我怎樣才能看到這些屬性？

謝謝。

Answer 1

這裏是你的錯誤，this關鍵字代表圖像的父母，而不是它自己的圖像。所以你有兩個選擇，你可以選擇this，然後在下面找到你的圖片。根據您的標記，這將是解決方案：

boxid = $(this).find("img").attr("data-boxid"); // added find() before calling attr 
articleid = $(this).find("img").attr("data-articleid");//added find() before calling attr 

---

但是，一個醜陋的解決方案。由於JQuery stop : function(event,ui)實際上給你提供了ui變量中存在的元素。本身不是ui，這是小孩ui.originalElement。所以你需要使用$(ui.originalElement).attr();來訪問圖像。

因此，你的代碼應該是這樣的：

boxid = $(ui.originalElement).attr("data-boxid"); // use 'ui' NOT 'this' 
articleid = $(ui.originalElement).attr("data-articleid");//use 'ui' NOT 'this' 

希望有所幫助。