gpt4 book ai didi

javascript - 从拖动的元素获取 HTML5 自定义数据属性

转载 作者:行者123 更新时间:2023-12-02 16:35:37 24 4
gpt4 key购买 nike

我有两个列表:一个仅用于获取元素(商店列表)并将它们拖到另一个列表(购物车)中。

购物车列表存储了放置在那里的每种类型的一个元素,如果将多个相同类型的元素拖到那里,我希望 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 字段与列表中已有的字段进行比较以检测重复项(这是一个较大应用程序的一个小型可执行示例,我需要比较多个自定义数据字段,因此比较列表条目的文本对我来说还不够;它必须是自定义数据字段)。

如您所见,我正在尝试从 onAdd 函数事件中读取已删除的项目(根据 FireBug,事件中包含的项目是已删除的项目及其自定义数据字段,所以这必须没问题),我正在尝试使用 .data() 检索数据字段。我读过 .data() 确实创建了值的副本,因此在修改值时使用 .attr() 是一个更好的主意,但是这个例子非常虚拟,不需要修改自定义数据字段,所以应该足够了。

Here is my JsFiddle 。知道出了什么问题吗?

最佳答案

我找到了答案:我正在使用 Jquery,而我本应该使用纯 JavaScript:

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

关于javascript - 从拖动的元素获取 HTML5 自定义数据属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27958738/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com