时间戳

首页 > 解决方案 > 单击各种按钮时如何在菜单内生成链接（文本）

javascript - 单击各种按钮时如何在菜单内生成链接（文本）

问题描述

我想知道如何能够生成不同的文本，这些文本是在单击不同按钮时显示它的菜单内的链接？

例如，当单击按钮 A 时，这将生成一个包含文本的菜单，其中显示所有以字母 A 开头的单词。当单击按钮 B 时，它将生成一个包含文本的菜单，其中显示所有以字母开头的单词B.

到目前为止，这是我所拥有的：

这是 drugCompendium.js 文件

const medicationA = [

    {
        name: "A WOMAN'S FORMULA",
        link: "#",
    },
    {
        name: "A. C. and C. 8 - 325+8+15mg",
        link: "#" 
    }
];

const medicationB = [

    {
        name: "B +C 600 Stress tablet",
        link: "#",
    },
    {
        name: "B 100 Complex la-tablet",
        link: "#" 
    }
];

function openNav() {
  document.getElementById("myNav1").style.width = "100%";
}

function closeNav() {
  document.getElementById("myNav1").style.width = "0%";
}

function medicationTemplate(medication){
        return `
            <a href="${medication.link}">
                ${medication.name}
            </a>
        `
}

使用该openNav()功能时，这将创建一个覆盖菜单，其中将包含来自药物 A、药物 B 等的对象。

到目前为止，我只能显示来自药物 A 或药物 B 的对象，但不能同时显示上面示例中所述的单击它们的对象。

这是我的其余文件：index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- ==================== CSS INTERNAL =============================== -->
    <!-- General Style Sheet -->
    <link rel="stylesheet" type="text/css" href="./css/gs.css">
    <!-- BUTTONS STYLE -->
    <link rel="stylesheet" type="text/css" href="./css/buttons.css">
    <!-- OVERLAY MENU STYLE -->
    <link rel="stylesheet" type="text/css" href="./css/overlayMenu.css">
    <!-- ==================== JAVASCRIPT INTERNAL =============================== -->
    <script type="text/javascript" src="./js/medicationCompendium.js"></script>
    <script type="text/javascript" src="./js/alphabet.js"></script>
    <title>Pharmacy Compendium</title>
</head>
<body>

    <div id="app">
        <script>
            document.getElementById('app').innerHTML = 
                `
                    <div id="myNav1" class="overlay">
                        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
                        ${medicationTemplate()}
                    </div>
                    <div class="buttonsSection">
                        ${alphabet.map(letterTemplate).join(" ")}
                    </div>
                `
        </script>
    </div>
    
</body>

</html>

最后：alphabet.js

const alphabet = [
  {
    letter: "A",
    number: 0
  },
  {
    letter: "B",
  },
  {
    letter: "C",
  },
  {
    letter: "D",
  },
  {
    letter: "E",
  },
  {
    letter: "F",
  },
  {
    letter: "G",
  },
  {
    letter: "H",
  },
  {
    letter: "I",
  },
  {
    letter: "J",
  },
  {
    letter: "K",
  },
  {
    letter: "L",
  },
  {
    letter: "M",
  },
  {
    letter: "N",
  },
  {
    letter: "O",
  },
  {
    letter: "P",
  },
  {
    letter: "Q",
  },
  {
    letter: "R",
  },
  {
    letter: "S",
  },
  {
    letter: "T",
  },
  {
    letter: "U",
  },
  {
    letter: "V",
  },
  {
    letter: "W",
  },
  {
    letter: "X",
  },
  {
    letter: "Y",
  },
  {
    letter: "Z",
  },
  
];

function letterTemplate(letters){
        return `
            <button class="button alphabet-button" onclick="openNav()">
                ${letters.letter}
            </button>
        `
}

标签： javascripthtml

解决方案

维护一个数组并对其进行迭代。这完全取决于您如何构建数据。

将所有药物组合在一个对象中并保持所有按钮的状态







const medication = {
a: [

    {
        name: "A WOMAN'S FORMULA",
        link: "#",
    },
    {
        name: "A. C. and C. 8 - 325+8+15mg",
        link: "#" 
    }
],

b: [

    {
        name: "B +C 600 Stress tablet",
        link: "#",
    },
    {
        name: "B 100 Complex la-tablet",
        link: "#" 
    }
]};

let activeButton = {
 a: false,
 b: false,
}

let items = []

function handleClick(btnId) {
  if (!activeButton[btnId]) {
    items = [ ...items, ...medication[btnId] ]
  } else {
    items = items.filter(item => !medication[btnId].includes(item))
  }
  
  activeButton[btnId] = !activeButton[btnId]

  renderItems()
}

function renderItems() {
  const app = document.getElementById('app')
  app.innerHTML = items.map(item => `<a href="${item.link}">${item.name}</a>`).join('<br>')
}

renderItems()


<button id="a-btn" onclick="handleClick('a')">a button</button>

<button id="b-btn" onclick="handleClick('b')">b button</button>

<div id="app"></div>

推荐阅读