如何使用jquery制作字符选择页面？

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

<div id="character-selector"></div>

$(document).ready(function() {
  // 定义字符集合
  var characters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];

  // 生成字符选择页面的内容
  var content = '';
  for (var i = 0; i < characters.length; i++) {
    content += '<button class="character">' + characters[i] + '</button>';
  }
  
  // 将内容添加到容器中
  $('#character-selector').html(content);

  // 处理字符选择事件
  $('.character').click(function() {
    var selectedCharacter = $(this).text();
    alert('你选择了字符：' + selectedCharacter);
  });
});

.character {
  padding: 10px;
  margin: 5px;
  background-color: #ccc;
  border: none;
  cursor: pointer;
}

#character-selector {
  display: flex;
  flex-wrap: wrap;
}