Javascript 更改列表项中的内容

我有一个多个项目的列表，一个小的图像框架和所有的描述

我需要将某个图像+描述绑定到列表项，因此如果选择item5，它将显示一种类型的图片和描述，依此类推（所有图片和描述都是唯一的）

我很难弄明白怎么做，因为我是js新手，我尝试过基本的方法，将一个类设置为一个项目，然后在js中获取类并更改内容

在这里，我试图只更改文本，但这似乎也不起作用：

HTML:

<div id="wrapper">
  <div id="list">
    <ol>
      <li id="item1">items1</li>
      <li>items2</li>
      <li>items3</li>
      <li>items4</li>
      <li>items5</li>
      <li>items6</li>
      <li>items7</li>
      <li>items8</li>
      <li>items9</li>
      <li>items10</li>
      <li>items11</li>
      <li>items12</li>
      <li>items13</li>
      <li>items14</li>
      <li>items15</li>
    </ol>
  </div>
  <div id="image-container">
    <div id="image">
      <img src="https://semantic-ui.com/images/wireframe/image.png" alt="">
    </div>
    <div id="description">
        just a placeholder text for when nothing has been chosen.
    </div>
  </div>
</div>

 /* containers  */
    * {
      font-family: Corbel;
    }

    #wrapper {
      border: 1px solid red;
      padding: 10px;
      display: inline-flex;
    }

    #image,
    #description,
    #list {
      border: 1px solid #472836;
      box-sizing: border-box;
      margin: 5px;
    }

    /* list  */
    #list {
      width: 150px;
      height: 250px;
      background-color: #9AD2CB;
      overflow-y: auto;
      overflow-x: hidden;
    }

    #list ol {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    #list li {
      padding: 5px;
    }

    #list li:nth-child(even) {
      background-color: #91f2e6;
      width: 100%;
      height: 100%;
    }

    #list li:hover {
      cursor: pointer;
      color: red;
    }

    /* sub-container */
    #image,
    #description {
      width: 150px;
      height: 150px;
    }

    #image {
      background-color: #D7EBBA;
    }

    #image img {
      width: 100%;
      height: 100%;
    }

    #description {
      background-color: #FEFFBE;
      overflow-y: auto;
      overflow-x: hidden;
      height: 95px;
    }

var desc_area = document.getElementById('description');

var desc1 = "random text for desc1";

function item1(){
    desc_area.innerHTML += desc1;

}

JS:

<div id="wrapper">
  <div id="list">
    <ol>
      <li id="item1">items1</li>
      <li>items2</li>
      <li>items3</li>
      <li>items4</li>
      <li>items5</li>
      <li>items6</li>
      <li>items7</li>
      <li>items8</li>
      <li>items9</li>
      <li>items10</li>
      <li>items11</li>
      <li>items12</li>
      <li>items13</li>
      <li>items14</li>
      <li>items15</li>
    </ol>
  </div>
  <div id="image-container">
    <div id="image">
      <img src="https://semantic-ui.com/images/wireframe/image.png" alt="">
    </div>
    <div id="description">
        just a placeholder text for when nothing has been chosen.
    </div>
  </div>
</div>

 /* containers  */
    * {
      font-family: Corbel;
    }

    #wrapper {
      border: 1px solid red;
      padding: 10px;
      display: inline-flex;
    }

    #image,
    #description,
    #list {
      border: 1px solid #472836;
      box-sizing: border-box;
      margin: 5px;
    }

    /* list  */
    #list {
      width: 150px;
      height: 250px;
      background-color: #9AD2CB;
      overflow-y: auto;
      overflow-x: hidden;
    }

    #list ol {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    #list li {
      padding: 5px;
    }

    #list li:nth-child(even) {
      background-color: #91f2e6;
      width: 100%;
      height: 100%;
    }

    #list li:hover {
      cursor: pointer;
      color: red;
    }

    /* sub-container */
    #image,
    #description {
      width: 150px;
      height: 150px;
    }

    #image {
      background-color: #D7EBBA;
    }

    #image img {
      width: 100%;
      height: 100%;
    }

    #description {
      background-color: #FEFFBE;
      overflow-y: auto;
      overflow-x: hidden;
      height: 95px;
    }

var desc_area = document.getElementById('description');

var desc1 = "random text for desc1";

function item1(){
    desc_area.innerHTML += desc1;

}

---

您可以将每个元素注册为

映射中的键，并将该元素的描述和图像源创建为相应的值（在本例中为对象）。我只注册了第一个项目，其他项目也可以用同样的方法注册，因此现在您可以单击
item1
查看结果


const desc_area=document.getElementById（'description'）；
const image=document.querySelector（'img'）；
const item1=document.querySelector（'#item1'）；
常量映射=新映射（）；
//将项元素注册为键，并将相应的描述/图像注册为值
set（item1，{desc:'somedescriptionforitem1'，img:'url/of/image'}）；
//例如，您可以绑定单击处理程序
const list=document.querySelector（'ol'）；
list.addEventListener（'click'，event=>{
//如果在映射中注册的元素触发了事件
if（map.has（event.target））{
//更改描述区域的文本
desc_area.textContent=map.get（event.target）.desc；
//更改图像的src
image.src=map.get（event.target）.img；
}
});
/*容器*/
* {
字体系列：牛腿；
}
#包装纸{
边框：1px纯红；
填充：10px；
显示：内联flex；
}
#形象,，
#描述，
#名单{
边框：1px实心#472836；
框大小：边框框；
保证金：5px；
}
/*名单*/
#名单{
宽度：150px；
高度：250px；
背景色：#9AD2CB；
溢出y：自动；
溢出x：隐藏；
}
#列表ol{
列表样式：无；
填充：0；
保证金：0；
}
#李列表{
填充物：5px；
}
#列表li:n个孩子（偶数）{
背景色：#91f2e6；
宽度：100%；
身高：100%；
}
#列表li：悬停{
光标：指针；
颜色：红色；
}
/*子集装箱*/
#形象,，
#描述{
宽度：150px；
高度：150像素；
}
#形象{
背景色：#D7EBBA；
}
#图像img{
宽度：100%；
身高：100%；
}
#描述{
背景色：#FEFFBE；
溢出y：自动；
溢出x：隐藏；
高度：95px；
}

项目1
项目2
项目3
项目4
项目5
项目6
项目7
项目8
项目9
项目10
项目11
项目12
项目13
项目14
项目15
只是一个占位符文本，用于在未选择任何内容时显示。
我想我知道你的意思，可以轻松地处理数据属性。只需添加图像路径的数据属性，然后获取该属性并用数据更新图像。差不多

<li data-imgsrc="/path/to/item2/image" data-desc="Description for the image 2">items2</li>
<li  data-imgsrc="/path/to/item3/image" data-desc="Description for the image3">items3</li>
<li  data-imgsrc="/path/to/item4/image" data-desc="Description for the image4">items4</li>

items2
项目3
项目4

只需为
li
元素创建一个侦听器，抓取imgsrc和desc，并将它们放入所需的dom中。
图像+描述div是否具有链接到每个列表项的唯一标识符（id/类），或者它们是否在第一个图像+描述div用于第一个列表项的位置排序，第二个div指向第二个列表项，依此类推？@AndrewL我觉得将图像和描述链接到列表项会比按顺序进行更有效，因为这样就没有错误的空间，只需进入并编辑“item1”或“item2”描述/img，或者可能只是我一个人。这是真的。让我试着摆弄一下你们的JSFIDLE。@AndrewL事实上，若我创建一个描述/img数组，然后按顺序进行，现在我想它实际上可能会更好，因为你们不需要对每个项目进行分类，你们更可能选择哪一个？我想链接它们会更容易阅读，也许这只是一个主观问题，matterBoth有自己的优点和缺点，但我觉得最好的方法是为每个列表项创建一个新的div“image container”，但只显示所选列表项的div。单击另一项只会显示相应的div并隐藏其他div。这意味着更少的js和更多的html。这完全取决于你是喜欢多点js少点html还是喜欢多点html少点js。