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

qcy-blog / 2024-07-12 / 原文

效果

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

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/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 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">&times;</span></button>';
      selectedItem.querySelector('.close').addEventListener('click', function() {
        // 删除右边列表中的项
        selectedList.removeChild(selectedItem);
      });
      selectedList.appendChild(selectedItem);
    }
  }

  // 监听添加按钮的点击事件
  addButton.addEventListener('click', function() {
    // 这里可以根据需要添加逻辑，比如更新数据库或执行其他操作
    // ...
  });
});
</script>

</body>
</html>