如何根据 javascript 中的随机 ID display/hide 获取信息？

Question

这个解释起来有点复杂，但我会尽力而为。我有一个 JSON 文件，里面装满了我的 javascript 和 HTML 从中提取的数据，具体取决于您 select.

的选项

基本上，显示的项目数量可以是1-100。还有一个按钮可以切换显示有关每个项目的更多或更少信息。每个项目都会调用此函数，以切换显示更多或显示更少。

// THIS VAR IS THE NUMBER OF ITEMS DISPLAYED (CAN BE 1-100)
var numberList;

function showSpellInfo(id) {
  // ARRAYLIST FOR IDS AND RANDOM NUMBER AMOUNT
  var numberList = [0];
  var spellContentList = ["spellContent0"];
  var showMoreButtonList = ["showMoreButton0"];
  var showLessButtonList = ["showLessButton0"]; 
  
  // BLUIDS THE ARRAYS
  for (let i = 0; i < listNumber; i++){
      var newVal = i + 1;
      numberList.push(newVal)
      spellContentList.push("spellContent" + newVal);
      showMoreButtonList.push("showMoreButton" + newVal);
      showLessButtonList.push("showLessButton" + newVal); 
}
  // BUTTON TO SHOW MORE INFO
  for (let x = 0; x < numberList.length; x++)
  if (document.getElementById(showMoreButtonList[x]).onclick = true){
      document.getElementById(showMoreButtonList[x]).style.display="none";
      document.getElementById(showLessButtonList[x]).style.display="inline-block";
      document.getElementById(spellContentList[x]).style.display="block";
  }   
}

我的问题是当我单击一个按钮时它会打开所有按钮。

我想要的是，当我点击一个 ID 时，它只会打开该 ID 的信息。问题可能是 1 个或 100 个 ID。有没有更简单的方法来做到这一点我是不是把它弄得太复杂了？

Answer 1

这行不通，因为您试图以错误的方式创建侦听器。但是还有一种更好的方法来构建它，而无需所有那些混乱的 ID。通过使用 show more/less 按钮侦听器找到它的相关元素来使其动态化。以下面为例，因为我无法确定你的数据是如何设置的。

var numberList;
let json = [{
  title: 'title1',
  description: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.'
}, {
  title: 'title2',
  description: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.'
}];

// the set up
let items = document.querySelector('.items');
const tpl = (item) => `<div class='item'><h3>${item.title}</h3><div class='desc'>${item.description}</div><button class='more-less'>Show More</button></div>`;
json.forEach(item => items.innerHTML += tpl(item));

// the event listener fires after the DOM has loaded
window.addEventListener('DOMContentLoaded', () => {
  // we listen to document for any click
  document.addEventListener('click', e => {
    // we test that the click came from one of our more-less buttons
    // e.target is the item that was clicked
    if (e.target.classList.contains('more-less')) {
      // we find the closest container element and set a class on it that will show or hide the data
      e.target.closest('.item').classList.toggle('viewing')
      // to change the button text, we need to know if it's currently showing
      let isopen = e.target.closest('.item').classList.contains('viewing')
      e.target.innerText = isopen ? 'Show Less' : 'Show More';
    }
  })
})

.item .desc {
  display: none;
}

.item.viewing .desc {
  display: block;
}

<div class='items'></div>

如何根据 javascript 中的随机 ID display/hide 获取信息？

How to display/hide info depending on random of IDs in javascript?

javascript

arrays

json

toggle

display