如何实现点击一个Bootstrap列表组切换另一个列表组内容？

我有两个Bootstrap列表组，第二个列表组基于JSON数据渲染，通过代码中的两个if语句进行筛选。当前点击“Howdy”选项时，第二个列表会显示“Howdy there”和“Howdy they're”；我希望点击“Howdee”选项时，第二个列表仅显示“Howdy their”（对应代码中第二个if语句的筛选结果）。

HTML #

<ul class="list-group">
  <li class="active">
    <a href="#"> Howdy</a>
  </li>
  <li>
    <a href="#"> Howdee</a>
  </li>
</ul>

<ul class="list-group">
  <div id="list"></div>
  <template id="template">
       <h5 class="media-heading">{sub}</h5>
      </template>
</ul>

JavaScript #

const activities1 = [];
const activities2 = [];

var json = {
  "Tasks": [{
    "Subject": "Howdy their"
  }, {
    "Subject": "Howdy there"
  }, {
    "Subject": "Howdy they're"
  }]
}

var obj = json.Tasks;

for (var i = 0; i < obj.length; i++) {
  activitySub = (obj[i].Subject);

  if (activitySub != "Howdy their") {
    activities1.push({
      activitySub,
    })
  }
  if (activitySub === "Howdy their") {
    activities2.push({
      activitySub,
    })
  }
}
console.log(JSON.parse(JSON.stringify(activities1)));
console.log(JSON.parse(JSON.stringify(activities2)));

const html = activities1.map(obj => {
  let item = document.querySelector('#template').innerHTML;
  item = item.replace('{sub}', obj.activitySub);
  return item;
});

document.querySelector('#list').innerHTML = html.join('');

要实现点击切换筛选结果的功能，只需添加点击事件监听，并封装统一的列表渲染逻辑：

修改后完整代码 #

HTML #

<ul class="list-group">
  <li class="active">
    <a href="#"> Howdy</a>
  </li>
  <li>
    <a href="#"> Howdee</a>
  </li>
</ul>

<ul class="list-group">
  <div id="list"></div>
  <template id="template">
       <h5 class="media-heading">{sub}</h5>
      </template>
</ul>

JavaScript #

const activities1 = [];
const activities2 = [];

var json = {
  "Tasks": [{
    "Subject": "Howdy their"
  }, {
    "Subject": "Howdy there"
  }, {
    "Subject": "Howdy they're"
  }]
}

var obj = json.Tasks;

// 保持原有数据筛选逻辑
for (var i = 0; i < obj.length; i++) {
  const activitySub = obj[i].Subject;
  if (activitySub !== "Howdy their") {
    activities1.push({ activitySub });
  } else {
    activities2.push({ activitySub });
  }
}

// 封装列表渲染函数，统一处理渲染逻辑
function renderList(data) {
  const html = data.map(item => {
    let template = document.querySelector('#template').innerHTML;
    return template.replace('{sub}', item.activitySub);
  });
  document.querySelector('#list').innerHTML = html.join('');
}

// 初始化默认显示Howdy对应的内容
renderList(activities1);

// 给导航项添加点击事件监听
const navItems = document.querySelectorAll('.list-group li');
navItems.forEach(item => {
  item.addEventListener('click', function() {
    // 切换导航项激活状态
    navItems.forEach(nav => nav.classList.remove('active'));
    this.classList.add('active');
    
    // 根据点击的文本切换数据源
    const navText = this.querySelector('a').textContent.trim();
    if (navText === 'Howdy') {
      renderList(activities1);
    } else if (navText === 'Howdee') {
      renderList(activities2);
    }
  });
});

关键说明 #

• renderList函数：将列表渲染逻辑封装，避免重复代码，只需传入对应数据源即可生成并插入列表内容
• 点击事件处理：点击导航项时，先切换激活状态，再根据导航文本选择对应数据源调用渲染函数，实现内容切换
• 优化了原有的条件判断逻辑，让代码更简洁易读

内容的提问来源于stack exchange，提问作者Nathan Zoho