获取未定义未定义答案

【问题标题】：Getting Undefined Undefined获取未定义未定义
【发布时间】：2017-04-06 04:53:19
【问题描述】：

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

【问题讨论】：

显示的 JS 叫什么？您使用的是$(this).attr('data-productname');，但this 是什么？如果代码在专门绑定到 img 元素的事件处理程序中，那么它应该可以工作，否则它将无法工作。
@Anil - 如果由于缺少与问题所询问的行为无关的库文件而产生错误，则将代码转换为可运行的 sn-p 是没有意义的。
@nnnnnn，感谢您的指出，包括 jquery UI。
@nnnnnn this 将是被删除的元素。

标签： javascript jquery

【解决方案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>

【讨论】：

谢谢！不过我确实有一个问题。为什么它仅在变量位于 If(){} 内时才起作用，添加 ui.draggable 而不添加 ' ' ？如果变量在一切之外，它不应该工作吗？
还尝试从 drop 中删除 IF，它正在工作。不过，我不明白为什么变量必须在 drop 内
if is for requirements :add to a table when drop on a specific box"。如果在其他任何地方放置，则不应填充您的表。

【解决方案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/

【讨论】：