一组js逻辑工作而另一组不工作

时间：2018-05-23 10:49:18

标签： javascript jquery html

PS：我非常感谢任何人为此添加更好的标题，我真的想不出其他任何事情

基本上我有这个列表逻辑：https://jsfiddle.net/ydtndwrv/10/，简而言之，每个项目都与描述和图像相关联。

我想在一个页面上添加两个，如下所示：https://jsfiddle.net/6g3x149n/1/ 

// -----------------START OF STYLING ELEMENT-----------------
var btns = document.getElementsByClassName("item");

for (var i = 0; i < btns.length; i++) {

  btns[i].addEventListener("click", function() {

    var siblings = this.parentNode.childNodes
    siblings.forEach(function(element) {

      if (element.className && element.className.indexOf('active') !== -1) {
        element.classList.remove("active");
      }
    })
    this.className += " active";
  });
}
// -----------------END OF STYLING ELEMENT-----------------


// -----------------START OF LOGIC ELEMENT-----------------

const desc_area = document.getElementById('description');
const image = document.querySelector('img');
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: 'https://pbs.twimg.com/profile_images/980681269859241984/-4cD6ouV_400x400.jpg'
});
map.set(item2, {
  desc: 'some description item2',
  img: 'https://78.media.tumblr.com/3d4a916d45190b2a58bec61f491cdb99/tumblr_p84af9767X1qhy6c9o1_500.gif'
});
map.set(item3, {
  desc: 'some  item3',
  img: 'https://cdn.europosters.eu/image/1300/32201.jpg'
});
map.set(item4, {
  desc: ' description for item4',
  img: 'https://www.scribblefun.com/wp-content/uploads/2018/02/Pusheen-Coloring-Images.png'
});

map.set(item5, {
  desc: 'This item5 is cool',
  img: 'https://c1-zingpopculture.eb-cdn.com.au/merchandising/images/packshots/855db32a4fc24da2ba2ce821edd2a51e_Large.png'
});
map.set(item6, {
  desc: 'item6 displays attitude',
  img: 'https://c1-ebgames.eb-cdn.com.au/merchandising/images/packshots/969932eb9d274a57a59daf9e75319929_Medium.png'
});
map.set(item7, {
  desc: 'amazing item7 just breathtaking',
  img: 'https://images-na.ssl-images-amazon.com/images/I/81GErgo2%2B8L._SY355_.jpg'
});
map.set(item8, {
  desc: ' item8 is an interesting conept',
  img: 'https://cdn.shopify.com/s/files/1/2012/3849/products/4048862.jpg?v=1505815578'
});

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



// -----------------END OF LOGIC ELEMENT-----------------
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


/* containers  */

#content-working {
  margin: 20px;
}

* {
  font-family: Corbel;
}

#wrapper {
  border: 1px solid red;
  padding: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

#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;
  transition: all .3s ease;
}

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

#list li:hover,
#list .active {
  cursor: pointer;
  color: red;
  padding-left: 25px;
}


/* 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="content-working">
  <div id="wrapper">
    <div id="list">
      <ol>
        <li id="item1" class="item">items1</li>
        <li id="item2" class="item">items2</li>
        <li id="item3" class="item">items3</li>
        <li id="item4" class="item">items4</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>

  <div id="wrapper">
    <div id="list">
      <ol>
        <li id="item5" class="item">items5</li>
        <li id="item6" class="item">items6</li>
        <li id="item7" class="item">items7</li>
        <li id="item8" class="item">items8</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>
</div>

问题是我似乎无法让第二个列表正常工作但是我已经非常接近这个问题了。

最初问题是我在js 中使用相同的description和img因此第二个问题需要理解哪一个现在去哪里。

  

我尝试 添加第二个描述：

const desc_area2 = document.getElementById('description2');
// and then when adding the event
..
 desc_area2.textContent = map.get(event.target).desc;
     

..但是当我在第一个列表中选择一个项目时，然后它    更改说明内容但与其他列表无效。

我不是很精通 JS 因此我无法找到解决方案。

1 个答案:

答案 0 :(得分：4)

我做了以下修改：

  1. 在CSS和HTML中将id更改为class，因为ID必须是唯一的
  2. 在适用时使用正确的多个选择器.querySelectorAll，.getElementsByClassName和.forEach。
  3. 删除了您的变量const desc_area和const image，以改为使用.forEach中的某些代码。

    4. 这是一个片段，其中多个元素正在可爱地：
    （有关JS修改的更多详细信息，请参阅我的代码中的注释，以及一些建议！）

    // -----------------START OF STYLING ELEMENT-----------------
var btns = document.getElementsByClassName("item");

for (var i = 0; i < btns.length; i++) {

  btns[i].addEventListener("click", function() {

    var siblings = this.parentNode.childNodes
    siblings.forEach(function(element) {

      if (element.className){  // && element.className.indexOf('active') !== -1) { // TAKIT: Removed, see suggestion below
        if (element.classList.contains('active')) // TAKIT: Suggestion: Easier, and better readability!
          element.classList.remove("active");
      }
    })
    this.classList.add("active"); // TAKIT: Suggestion instead of this.className += " active";
  });
}
// -----------------END OF STYLING ELEMENT-----------------


// -----------------START OF LOGIC ELEMENT-----------------


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: 'https://pbs.twimg.com/profile_images/980681269859241984/-4cD6ouV_400x400.jpg'
});
map.set(item2, {
  desc: 'some description item2',
  img: 'https://78.media.tumblr.com/3d4a916d45190b2a58bec61f491cdb99/tumblr_p84af9767X1qhy6c9o1_500.gif'
});
map.set(item3, {
  desc: 'some  item3',
  img: 'https://cdn.europosters.eu/image/1300/32201.jpg'
});
map.set(item4, {
  desc: ' description for item4',
  img: 'https://www.scribblefun.com/wp-content/uploads/2018/02/Pusheen-Coloring-Images.png'
});

map.set(item5, {
  desc: 'This item5 is cool',
  img: 'https://c1-zingpopculture.eb-cdn.com.au/merchandising/images/packshots/855db32a4fc24da2ba2ce821edd2a51e_Large.png'
});
map.set(item6, {
  desc: 'item6 displays attitude',
  img: 'https://c1-ebgames.eb-cdn.com.au/merchandising/images/packshots/969932eb9d274a57a59daf9e75319929_Medium.png'
});
map.set(item7, {
  desc: 'amazing item7 just breathtaking',
  img: 'https://images-na.ssl-images-amazon.com/images/I/81GErgo2%2B8L._SY355_.jpg'
});
map.set(item8, {
  desc: ' item8 is an interesting conept',
  img: 'https://cdn.shopify.com/s/files/1/2012/3849/products/4048862.jpg?v=1505815578'
});

// you can bind on click handler for example
const list = document.querySelectorAll('ol'); // TAKIT: Modified to return multiple elements
list.forEach(function() { // TAKIT: Added to manage the multiple elements
  this.addEventListener('click', event => {
    // if element that was registered in our map triggered the event
    if (map.has(event.target)) {
      var wrapper = event.target.closest('.wrapper'); // TAKIT: Get parent wrapper
      // change text of description area
      wrapper.querySelector('.description').textContent = map.get(event.target).desc; // TAKIT: Modified
      // change src of the image
      wrapper.querySelector('img').src = map.get(event.target).img; // TAKIT: Modified
    }
  });
});



// -----------------END OF LOGIC ELEMENT-----------------
    body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


/* containers  */

#content-working {
  margin: 20px;
}

* {
  font-family: Corbel;
}

.wrapper {
  border: 1px solid red;
  padding: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.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;
  transition: all .3s ease;
}

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

.list li:hover,
.list .active {
  cursor: pointer;
  color: red;
  padding-left: 25px;
}


/* 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="content-working">
  <div class="wrapper">
    <div class="list">
      <ol>
        <li id="item1" class="item">items1</li>
        <li id="item2" class="item">items2</li>
        <li id="item3" class="item">items3</li>
        <li id="item4" class="item">items4</li>
      </ol>
    </div>
    <div class="image-container">
      <div class="image">
        <img src="https://semantic-ui.com/images/wireframe/image.png" alt="">
      </div>
      <div class="description">
        just a placeholder text for when nothing has been chosen.
      </div>
    </div>
  </div>

  <div class="wrapper">
    <div class="list">
      <ol>
        <li id="item5" class="item">items5</li>
        <li id="item6" class="item">items6</li>
        <li id="item7" class="item">items7</li>
        <li id="item8" class="item">items8</li>
      </ol>
    </div>
    <div class="image-container">
      <div class="image">
        <img src="https://semantic-ui.com/images/wireframe/image.png" alt="">
      </div>
      <div class="description">
        just a placeholder text for when nothing has been chosen.
      </div>
    </div>
  </div>
</div>

    希望它有所帮助！

相关问题
最新问题