javascript - 如何使用javascript从数据库调用的子菜单列表中选择项目

Question

我使用 createElement("li") 将数组中的项目列表调用到子菜单中。现在我想从列表中选择项目。我使用 CSS 使它们可选择。但是我想像选择一个项目时那样编写代码，然后启用该项目的调用功能。我该怎么做？

var gameName = ['Game one', 'Game Two', 'Game three']

function SubMenu() {
  // Set variable for the submenu ul element
  var Submenu = document.getElementById('submenu');
  // For loop - for each value in the array
  for (var i = 0; i < gameName.length; i++) {
    // Create new li/List Item
    var Item = document.createElement('li');
    // Set innerHTML for this element
    Item.innerHTML = '<a href="#">' + gameName[i] + '</a>';
    // Append new element to the submenu.
    Submenu.appendChild(Item);
  }

<ul>
<li><a href="#">Games</a>
  <ul id="submenu"></ul>
</li>
<li><a href="#">Stake</a></li>
<li><a href="#">Max PLayers</a></li>
<ul>

此处“游戏一”、“游戏二”、“游戏三”作为子菜单列表调用。现在我如何选择“第一场比赛”以便我能够调用它的功能？谢谢。

Answer 1

我稍微修改了你的代码，不确定它是否有效，但我认为应该这样做

var gameName=['Game one','Game Two','Game three']
function SubMenu(){
  //Set variable for the submenu ul element
  var Submenu = document.getElementById('submenu');
  //For loop - for each value in the array
  for(var i=0; i<gameName.length; i++){
      //Create new li/List Item
   var Item = document.createElement('li');
      //Set innerHTML for this element
   Item.innerHTML='<a href="#" id=' + gameName[i] + '>'+gameName[i]+'</a>';
      //Append new element to the submenu.
   Submenu.appendChild(Item);
   document.getElementById(gameName[i]).onclick = function(){
      alert('clicked on game name ' + this.id);
    }
  }

<ul>
<li><a href="#">Games</a>
  <ul id="submenu"></ul>
</li>
<li><a href="#">Stake</a></li>
<li><a href="#">Max PLayers</a></li>
<ul>