javascript - 更改列表项的内容

Question

我有一个包含多个项目的列表、一个小图像框和一个描述。

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

由于我是 js 的新手，所以我很难弄清楚如何执行此操作，我确实尝试了基本方法，将类设置为项目，然后在 js 中获取类并更改内容。

在这里，我试图只更改文本，但这似乎也没有效果:https://jsfiddle.net/8z37f15j/5/

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>

CSS:

 /* 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;
    }

JS:

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

var desc1 = "random text for desc1";

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

}

Answer 1

您可以将每个元素注册为 Map 中的键，并为该元素创建描述和图像源作为相应的值(在本例中为对象)。我只注册了第一个项目，但其他项目可以用同样的方式完成，所以现在您可以点击 item1 并查看结果。

const desc_area = document.getElementById('description');
const image = document.querySelector('img');
const item1 = document.querySelector('#item1');
const map = new Map();

// register item element as a key and object with corresponding description / image as value
map.set(item1, { desc: 'some description for item1', img: 'url/of/image' });

// you can bind on click handler for example
const list = document.querySelector('ol');
list.addEventListener('click', event => {
  // if element that was registered in our map triggered the event
  if (map.has(event.target)) {
    // change text of description area
    desc_area.textContent = map.get(event.target).desc;
    // change src of the image
    image.src = map.get(event.target).img;
  }
});

/* 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;
   }

<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>