我有一個包含許多不同項目（菜單項）的模式。我想這樣做，所以當我單擊任何特定菜單項的標題時，會彈出另一個模式，顯示所述菜肴的圖像。我遇到的唯一問題是，我必須為每道菜（其中 15 個）創建大量不同的模態。有沒有辦法我可以創建一個函數/循環，以便他們只訪問附加到所述項目的特定圖像？我應該為圖像創建一個單獨的容器嗎？或者將它們自己添加到項目容器中并將顯示設置為無？這是一個沒有太多css或JS的例子嗎？有什么解決這個問題的最佳方法的想法嗎？/*This is the background/ not the box itself*/.menu {    display: block;    position: fixed;    z-index: 999;    left: 0;    top: 0;    width: 100%;    height: 100%;    overflow: none;    background-color: rgba(0, 0, 0, .4);}/*Menu Content Box*/.menuContent {    background-color: #f1e3cb;    margin: 5% auto;    border: 1px solid #888;    width: 50%;    height: 80%;    border-radius: 5px;    font-family:'IM Fell French Canon SC', serif;    font-weight: 600;    overflow-y: scroll;    &::-webkit-scrollbar {        width: 10px;    }    &::-webkit-scrollbar-track {        background: #f1e3cb;    }    &::-webkit-scrollbar-thumb {        background: #888;    }    .menuHeader {        text-align: center;            }    .menu-items {        display: flex;        flex-direction: row;        justify-content: space-evenly;        text-align: center;        margin: 20px 0 0;        > div  {            width: 33%;            margin: 0 5px;        }                        p{            text-align: left;            &:hover {                cursor: pointer;                transform: scale(1.1);                transform-origin: left;            }        }        .item {            margin-top: 20px;            align-self: center;                            }    }}/*Close button*/.close {    color: #aaa;    float: right;    font-size: 28px;    font-weight: bold;    padding-right: 10px;    overflow: auto;    &:hover,    &:focus {        color: black;        text-decoration: none;        cursor: pointer;    }}