Question

我正在使用一个应用程序，当用户将容器放入特殊div时，使用Jquery以编程方式将总计添加到两个不同的div。但是，计数器正在从错误的容器中添加总计。在我的测试数据中，我有两个可拖动的容器，看起来类似于以下内容：

container1: pallets:10 weight:5
container2: pallets:20 weight:1265

但是当我将container1放入div时，它报告的托盘为20，重量为1265.容器2反之亦然。我确定问题出在我的jquery中，但我无法理解。这是我的模板代码。

<div id="wrapper">
    <div id="origin" class="fbox">
        {% for freight in freight_list %}
            <span class="freight draggable" data-content="
                Pickup Customer: <br/> {{ freight.pu_customer }} <br/>
                Pickup Datetime: <br/> {{ freight.pu_appt_time|date:'D M d Y @ h:m a' }} <br/>
                Time Until Pickup: <br/> {{ freight.pu_appt_time|timeuntil }} <br/>
                Pickup Address: <br/> {{ freight.pu_location }} <br/>
                Number of Pallets: {{ freight.pallet_count }} <br/>
                Total Weight: {{ freight.weight }} <br/>
                Delivery Customer: <br/> {{ freight.del_customer }} <br/>
                Delivery Address: <br/> {{ freight.del_location }}, {{ freight.del_city }}, {{ freight.del_state }}
                ">
                    <p>{{ freight.pu_customer }}</p>
                    <p>{{ freight.pu_appt_time|date:'D M d Y @ h:m a' }}</p>
                    <p>{{ freight.pu_appt_time|timeuntil }}</p>
                    <p class="pallet">{{ freight.pallet_count }}</p>
                    <p class="weight">{{ freight.weight }}</p>
                    <p>{{ freight.del_customer }}</p>
                </span>
        {% endfor %}
    </div>
    <h1>Drop in truck</h1>
    <i class="fa fa-truck fa-15x cabin"></i>
    <div id="drop" class="fbox">

    </div>

    <div class="infopane">
        <div class="info_desc">
            Description of load
        </div>
    </div>

    <div class="counters">
        Total Pallets:
        <div class="palletCount">0</div>
        Total Weight:
        <div class="weightCount">0</div>
    </div>

</div>
<script>
    var pallet_sum = 0;
    var weight_sum = 0;
    $(".draggable").draggable({cursor: "crosshair", revert: "invalid"});
    $("#drop").droppable({
        accept: ".draggable",
        drop: function (event, ui) {
            $(this).removeClass("border").removeClass("over");
            var dropped = ui.draggable;
            var droppedOn = $(this);
            $(dropped).detach().css({top: 0, left: 0}).appendTo(droppedOn);

            // Add total number of pallets and total weight in trailer
            pallet_sum += Number($('.pallet').html());
            weight_sum += Number($('.weight').html());

            console.log('pallet count:' + pallet_sum);
            console.log('weight count:' + weight_sum);
            $('.palletCount').html(pallet_sum);
            $('.weightCount').html(weight_sum);
        },
        over: function (event, elem) {
            $(this).addClass("over");
        }
        ,
        out: function (event, elem) {
            $(this).removeClass("over");
        }
    });
    $("#drop").sortable();

    $("#origin").droppable({
        accept: ".draggable", drop: function (event, ui) {
            console.log("drop");
            $(this).removeClass("border").removeClass("over");
            var dropped = ui.draggable;
            var droppedOn = $(this);
            $(dropped).detach().css({top: 0, left: 0}).appendTo(droppedOn);


        }
    });

    $(".freight").hover(function () {
        $('.info_desc').html(($(this).attr('data-content'))).show();
    }, function () {
        $('.info_desc').html('Description of load');
    });

</script>

Answer 1

当你的jQuery试图找到丢弃的托盘的计数和重量时，它会按类.pallet进行查找，而不会将其限制为删除的div的后代。

你应该dropped.find('.pallet')等。

Django和Jquery从模型中获取错误的数据

1 个答案: