Question

我有一个包含多个项目的列表，一个小图像框架以及所有描述。

我需要将某个图像+描述绑定到列表项，因此如果选择了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>

Answer 2

我想我知道你的意思，并且可以轻松使用数据属性。只需添加图像路径的数据属性，然后抓取它并使用数据更新图像。像

这样的东西

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

只需为li元素创建一个侦听器，然后抓取imgsrc和desc，并将它们放在需要的dom中。

更改列表项中的内容

2 个答案: