标签：itemId selectedItem js item html 选中 var document quantity
效果
后台要开发个功能，给游戏内的用户赠送道具，先把道具列表展示，然后选择要增送的道具，可以加上道具图片之类的，美化
index.html 页面没有美化，只是实现了效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 美化的数据列表示例</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- 左边列表项 -->
<ul class="list-group" id="list-container">
<li class="list-group-item" data-id="1">数据1</li>
<li class="list-group-item" data-id="2">数据2</li>
<li class="list-group-item" data-id="3">数据3</li>
</ul>
</div>
<div class="col-md-6">
<!-- 右边选中的数据和数量 -->
<div class="input-group mb-3">
</div>
<ul class="list-group" id="selected-list">
<!-- 右边选中的数据和数量将显示在这里 -->
</ul>
</div>
</div>
</div>
<!-- 引入 Bootstrap 的 JavaScript 组件 -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var listContainer = document.getElementById('list-container');
var addButton = document.getElementById('add-button');
var selectedList = document.getElementById('selected-list');
var quantityInput = document.getElementById('quantity-input');
// 监听左边列表项的点击事件
listContainer.addEventListener('click', function(e) {
var item = e.target.closest('.list-group-item');
if (item) {
var itemId = item.getAttribute('data-id');
updateRightSide(itemId); // 更新右边的数据
}
});
// 更新或增加右边的数据和数量
function updateRightSide(itemId) {
var itemText = '数据' + itemId;
var selectedItem = selectedList.querySelector('li[data-id="' + itemId + '"]');
var quantity = 1;
if (selectedItem) {
// 如果右边已经有这个数据项，增加数量
quantity = parseInt(selectedItem.querySelector('.quantity').textContent, 10) + 1;
selectedItem.querySelector('.quantity').textContent = quantity;
} else {
// 如果右边没有这个数据项，创建新的列表项
selectedItem = document.createElement('li');
selectedItem.className = 'list-group-item d-flex justify-content-between align-items-center';
selectedItem.setAttribute('data-id', itemId);
selectedItem.innerHTML = '<span>' + itemText + '</span>' +
'<span class="quantity">' + quantity + '</span>' +
'<button type="button" class="close" aria-label="Remove"><span aria-hidden="true">×</span></button>';
selectedItem.querySelector('.close').addEventListener('click', function() {
// 删除右边列表中的项
selectedList.removeChild(selectedItem);
});
selectedList.appendChild(selectedItem);
}
}
// 监听添加按钮的点击事件
addButton.addEventListener('click', function() {
// 这里可以根据需要添加逻辑，比如更新数据库或执行其他操作
// ...
});
});
</script>
</body>
</html>
标签：itemId,
selectedItem,
js,
item,
html,
选中,
var,
document,
quantity
From： https://www.cnblogs.com/qcy-blog/p/18298327