獲取未定義未定義

Question

我試圖獲取圖像的數據屬性，以便它在圖像位於特定容器上時將每個數據屬性（產品名稱&價格）添加到表格行。我得到未定義，而不是每個屬性值。我能找到的所有方法都是獲取屬性（.data（「productname」）/ attr（「data-productname」）），但它什麼也沒做。我能夠從未定義到對象對象編寫.attr （ 「數據」， 「產品名稱」），但僅此而已。

var dentro = 0; 
 
    var productname = $(this).attr('data-productname'); 
 
    var price = $(this).attr('data-price'); 
 
    var row = "<tr><td>"+productname+"</td><td>"+price+"</td>" 
 

 
    $("div#productcontainer img").draggable(); 
 
    $("#dropoutspiral").droppable({ 
 
    tolerance: "fit", 
 

 

 
    drop : function(e){ 
 
     // $(".ui-draggable-dragging").effect("shake","slow"); 
 
     $(".ui-draggable-dragging").animate({ 
 
      "width": "0px", 
 
      "height": "0px" 
 
      }, { queue: false }, 1000, 
 
      function(){ 
 
       // $("table tbody").append(row); 
 
       //alert("animacion comnpletada"); 
 
      }); 
 
     $(".ui-draggable-dragging").animate({ 
 
      opacity: 0, 
 
     }, { queue: false }, 1000); 
 
    }, 
 

 
    over : function(e){ 
 
     $("table tbody").append(row); 
 

 
    } 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js"> 
 
</script> 
 
<div id="globalcontainer"> 
 
    <div id="dropoutspiral"> 
 
     <img class="absolute" src="img/spiral-comp.gif"> 
 
    </div> 
 

 
    <div id="productcontainer"> 
 
     <img data-productname="manzana" data-price="10" src="img/manzana.jpg"> 
 
     <img data-productname="piña" data-price="50" src="img/pina.jpg"> 
 
     <img data-productname="uvas" data-price="80" src="img/uvas.jpg"> 
 
     <img data-productname="reloj" data-price="2000" src="img/watch.jpg"> 
 
    </div> 
 

 
    <div id="table"> 
 
     <table> 
 
      <thead> 
 
       <td>PRODUCTO</td> 
 
       <td>PRECIO</td> 
 
      </thead> 
 
     <tbody> 
 
     </tbody> 
 
    </div> 
 

 
</div>

Answer 1

您需要使用丟棄事件UI元素，下面請參閱更新放置事件。

drop : function(e,ui){ 
var productname = $(ui.draggable).attr('data-productname'); 
     var price = $(ui.draggable).attr('data-price'); 

$(this)表示可放置（您的方框）。 ui.draggable表示可拖動的元素，即您正在放置的元素。

var dentro = 0; 
 
    
 

 
    $("div#productcontainer img").draggable(); 
 
    $("#dropoutspiral").droppable({ 
 
    tolerance: "fit", 
 

 

 
    drop : function(e,ui){ 
 
    if($(this).attr('id') == 'dropoutspiral') { 
 
     var productname = $(ui.draggable).attr('data-productname'); 
 
     var price = $(ui.draggable).attr('data-price'); 
 
     var row = "<tr><td>"+productname+"</td><td>"+price+"</td>" 
 
     alert(productname); 
 
     $("table tbody").append(row); } 
 

 
     $(".ui-draggable-dragging").animate({ 
 
      "width": "0px", 
 
      "height": "0px" 
 
      }, { queue: false }, 1000, 
 
      function(){ 
 
       
 
       
 
      }); 
 
     $(".ui-draggable-dragging").animate({ 
 
      opacity: 0, 
 
     }, { queue: false }, 1000); 
 
    }, 
 

 
    over : function(e){ 
 
    
 

 
    } 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js"> 
 
</script> 
 
<div id="globalcontainer"> 
 
    <div id="dropoutspiral"> 
 
     <img class="absolute" src="https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"> 
 
    </div> 
 

 
    <div id="productcontainer"> 
 
     <img data-productname="manzana" data-price="10" src="img/manzana.jpg"> 
 
     <img data-productname="piña" data-price="50" src="img/pina.jpg"> 
 
     <img data-productname="uvas" data-price="80" src="img/uvas.jpg"> 
 
     <img data-productname="reloj" data-price="2000" src="img/watch.jpg"> 
 
    </div> 
 

 
    <div id="table"> 
 
     <table> 
 
      <thead> 
 
       <td>PRODUCTO</td> 
 
       <td>PRECIO</td> 
 
      </thead> 
 
     <tbody> 
 
     </tbody> 
 
    </div> 
 

 
</div>

Answer 2

您可以使用下面的代碼拔出屬性。

腳本：

$(function() { 
 
    $('#productcontainer').children('img').each(function() { 
 
     $("#datadiv").append("<div>"+$(this).data('productname')+" | "+$(this).data('price')+"</div>"); // "this" is the current element in the loop 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 
    <div id="productcontainer"> 
 
     <img data-productname="manzana" data-price="10" src="img/manzana.jpg"> 
 
     <img data-productname="piña" data-price="50" src="img/pina.jpg"> 
 
     <img data-productname="uvas" data-price="80" src="img/uvas.jpg"> 
 
     <img data-productname="reloj" data-price="2000" src="img/watch.jpg"> 
 
    </div> 
 
    <div id="datadiv"> 
 
     <div><span> Name </span> | <span> Price </span></div> 
 
    </div>

的jsfiddle：

https://jsfiddle.net/b1mLbygk/1/