從拖動的元素獲取HTML5自定義數據屬性

Question

我有兩個列表：一個僅用於獲取元素（商店列表）並將它們拖到另一個列表（購物車）中。

購物車列表中存儲了每種放置的一個elemenet，如果將多個相同類型的elemenet拖到那里，我希望Twitter Bootstrap徽章增加，並避免存儲新的重復條目。

HTML：

<div class="panel panel-primary">
    <div class="panel-heading">Fruit store</div>
    <div class="panel-body">
        <ul id="fruit-list" class="list-group">
            <li href="#" class="list-group-item" data-type="apple">Apple</li>
            <li href="#" class="list-group-item" data-type="pear">Pear</li>
            <li href="#" class="list-group-item" data-type="banana">Banana</li>
            <li href="#" class="list-group-item" data-type="watermellon">Watermellon</li>
        </ul>
    </div>
</div>
<div class="panel panel-primary">
    <div class="panel-heading">Shopping cart</div>
    <div class="panel-body">
        <ul id="cart-list" class="list-group">
            <li href="#" class="list-group-item" data-type="banana">Banana
                <div class="pull-right">
                    <span id="badge" class="badge">5</span>
                </div>
            </li>
            <li href="#" class="list-group-item" data-type="pear">Pear
                <div class="pull-right">
                    <span id="badge" class="badge">2</span>
                </div>
            </li>
        </ul>
    </div>
</div>

JS：

// Create fruit store list
var list_element = document.getElementById("fruit-list");
var fruit_list = new Sortable(list_element, {
    group: {
        name: "fruit_group",
        pull: 'clone',
        put: false
    },
    sort: false,
    ghostClass: "droppable-area",
});

// Create shopping cart list

    var cart_list_element = document.getElementById("cart-list");
    var cart_list = new Sortable(cart_list_element, {
        group: {
            name: "fruit_group",
            pull: true,
            put: true
        },
        // Element is dropped into the list from another list
        onAdd: function (event) {
            console.log(event.item)
            // First check if there is an equal fruit at the list already. In that case, increment badge number
            var draggedElement = event.item;
            var type = draggedElement.data('type');

            // Iterate existing elements
            $("#cart-list li").each(function () {
                var existingType = $(this).data('type');

                if (existingType == type){
                    var numberOfFruits = event.item.closest('span').innerHTML;
                    console.log(numberOfFruits + ' ' + type + ' already at the list, updating badges');
                    // Increment number of this fruit
                    (event.item.closest('span').innerHTML)++;
                    return false; //break statement
                } else {
                    console.log('New fruit inserted to cart list');
                }
            });
        },
    });

它不起作用，並且Firebug認為問題在於讀取HTML5自定義數據字段data-type 。 我需要將此data-type字段與列表中已經存在的data-type字段進行比較以檢測重復項（這是一個較大的應用程序的小型可執行示例，在這里我需要比較多個自定義數據字段，因此需要比較列表條目的文本對我來說還不夠；它必須是自定義數據字段）。

如您所見，我試圖讀取從onAdd函數事件中獲取的被刪除項（根據FireBug ，事件中包含的項是具有其自定義數據字段的被刪除項，因此必須可以），我正在嘗試使用.data（）檢索數據字段。 我已經讀到.data()確實會創建值的副本，因此在修改值時使用.attr()是一個更好的主意，但是此示例是相當虛構的，不需要修改自定義數據字段，所以應該足夠了

這是我的JsFiddle 。 知道有什么問題嗎？

Answer 1

我找到了答案：我正在使用Jquery，應該使用普通的JavaScript：

var type = event.item.getAttribute("data-type");