使用jQuery在Div Tag中减去HTML5数据属性值和显示结果

Question

我正在创建一个数学游戏。游戏将允许儿童拖动减法符号＆＃34; - ＆＃34;在两个数字中的任何一个上都会出现答案（例如9-4 = 5）。

我有随机数字出现在HTML5数据属性＆＃34;数据价格＆＃34;。我现在唯一的问题是当我将减法符号拖到我给出的一个类＆＃34; drop＆＃34;问题的答案没有出现在我的变量＆＃34; total_costs＆＃34;中。

(function(){

        //declare my variables
        var numLow = 1, //lowest number
            numHigh = 20,//highest number
            $firstNum = $('#firstNum'),
            $secondNum = $('#secondNum'),
            adjustedHigh, numRand1, numRand2 = null,
            total_costs=0;


            //Callback function when cancelling the event
            function cancel(e){
                if(e.preventDefault){
                    e.preventDefault();
                }
                return false;
            }

            //refresh total cost "numbers added"

            function refresh_total_costs(total_costs){
                $('#total-cost span').text(total_costs);
            }


            //generates random numbers and stores random numbers in data-price attribute 
            //and displays random numbers in divs #firstNum and #secondNum
            adjustedHigh = (parseFloat(numHigh) - parseFloat(numLow)) + 1;

            numRand1 = Math.floor(Math.random()*adjustedHigh) + parseFloat(numLow);

            numRand2 = Math.floor(Math.random()*adjustedHigh) + parseFloat(numLow);

            $firstNum.attr('data-price', numRand1);

            $firstNum.text( $("#firstNum").attr("data-price"));

            $secondNum.attr('data-price', numRand2);

            $secondNum.text( $("#secondNum").attr("data-price"));


            refresh_total_costs(total_costs);



        //Get the .drop zones
        var drop = $('.drop');

        var draggedItem = null;

        //Add the Event Listener to draggable item "+" symbol
        $('.draggable-item').on('dragstart', function(e){
            draggedItem = jQuery(this);
        }, false);

        drop.on('dragover', cancel);
        drop.on('dragenter', cancel);

        drop.on('drop', function(e){
            //Prevent default browser behaviour
           e.preventDefault(); 

          //Do the math
          total_costs = parseInt($("#firstNum").attr("data-price")) + parseInt($("#secondNum").attr("data-price"));

          refresh_total_costs(total_costs);

           return false;
        });




            })();