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' 

희망 :

따라서, 코드가 같은 것을해야한다.