获取未定义的未定义

Question

我正在尝试获取图像的数据属性，以便在图像位于特定容器上时将每个数据属性（产品名称和价格）添加到表格行。我得到undefined而不是每个属性值。我能找到的只是获取属性的不同方法（.data（“productname”）/ attr（“data-productname”），但它没有做任何事情。我能够从undefined转到对象对象写入.attr （“data”，“productname”），但就是这样。

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

您需要使用drop事件的UI元素，请参阅下面的更新drop事件。

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

$(this)代表droppable（您的框）。 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

您可以使用以下代码来提取属性。

脚本：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

jsfiddle：

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