Question

我想通过Javascript将数据集属性“data-price”与两个拖动的div框的十进制数一起得到它们。

这是我的div框：

    <div name="qty" id="black" data-price="21.1" draggable="true" ondragstart="drag(event)">

我尝试用这个脚本

来做

    <script type="text/javascript">
    function findTotal(){
        var arr = document.querySelectorAll("se > div");
        var tot=0;
        for(var i=0;i<arr.length;i++){
            if(parseInt(arr[i].dataset.price))
                tot += parseInt(arr[i].dataset.price);
        }
        document.getElementById('total').value = tot;
    }
     </script>

但它只计算未拖动框的数据价格。

      <script>
    function allowDrop(ev) {
        ev.preventDefault();
    }

    function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
    }

    function drop(ev) {
       ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
    }
      </script>

我在这里做错了什么？

Answer 1

您应该为我们添加整个HTML代码，以了解如何使用表单/名称/属性设置元素。我根据你的代码写了一个简单的例子，它对我来说很好，它只计算掉到target元素的元素。对于十进制数字，请使用parseFloat而非parseInt：

function findTotal(){
    var arr = document.querySelectorAll(".target > div");
    var tot=0;
    for(var i=0;i<arr.length;i++){
        if(parseInt(arr[i].dataset.price))
            tot += parseFloat(arr[i].dataset.price);
    }
    document.getElementById('total').textContent = tot;
}

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
    
    findTotal();
}

document.getElementById('reset').onclick = function() { window.location.reload(); }

#black {
background-color: black;
color:white;
}

#red {
background-color: red;
}

#yellow {
background-color: yellow;
}

#green {
background-color: green;
color:white;
}

.qty {
width:50px;
height:50px;
display: inline-block;
margin-right:5px;
margin-bottom:5px;
}


.target {

height:100px;
border:1px solid grey;

}

<button id="reset">Reset</button>
<hr>

<form>
<div class="qty" id="black" data-price="21.1" draggable="true" ondragstart="drag(event)">21.1</div>
<div class="qty" id="red" data-price="16.5" draggable="true" ondragstart="drag(event)">16.5</div>
<div class="qty" id="yellow" data-price="7.8" draggable="true" ondragstart="drag(event)">7.8</div>
<div class="qty" id="green" data-price="3.5" draggable="true" ondragstart="drag(event)">3.5</div>


<h3>Drop items here</h3>
<div class="target" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<h3>Total: </h3>
<div id="total"></div>

</form>

我的例子也可以在这里找到：http://zikro.gr/dbg/html/jsdd/

如何获取拖动的div框的数据集属性？

1 个答案: