html+js实现选中左边的数据到右边

效果

后台要开发个功能，给游戏内的用户赠送道具，先把道具列表展示，然后选择要增送的道具，可以加上道具图片进行页面美化

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" style=" height: 500px; overflow-y: scroll;">
      <!-- 左边列表项 -->
      <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/core@2.9.3/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 selectedList = document.getElementById('selected-list');
            // 监听左边列表项的点击事件
            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('input[type="number"]').value, 10) + 1;
                    selectedItem.querySelector('input[type="number"]').value = 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>' +
                        '<input type="number" class="quantity form-control form-control-sm" value="' + quantity + '" min="1" style="max-width: 80px;">' +
                        '<button type="button" class="close" aria-label="Remove"><span aria-hidden="true">&times;</span></button>';
                    selectedItem.querySelector('.close').addEventListener('click', function() {
                        // 删除右边列表中的项
                        selectedList.removeChild(selectedItem);
                    });
                    selectedList.appendChild(selectedItem);
                }
            }
 
  // 监听添加按钮的点击事件
  addButton.addEventListener('click', function() {
    // 这里可以根据需要添加逻辑，比如更新数据库或执行其他操作
    // ...
  });
});
</script>

</body>
</html>
posted @ 2024-07-12 14:32  朝阳1  阅读(61)  评论(0)    收藏  举报