如何修改JavaScript代码默认选中首个筛选li项并展示对应内容？

问题描述 #

页面默认展示所有论文内容（期刊论文、工作论文、会议论文），需要实现：进入网站时自动选中第一个<li>（期刊论文），仅展示对应分类的内容。

相关代码 #

HTML #

<div class="row" data-aos="fade-up">
  <div class="col-lg-12 d-flex justify-content-center">
    <ul id="portfolio-flters">
      <li data-filter=".filter-journal">Journal articles</li>
      <li data-filter=".filter-wp">Working papers</li>
      <li data-filter=".filter-conferences">Conferences</li>              
    </ul>
  </div>
</div>

<div class="row portfolio-container" data-aos="fade-up" data-aos-delay="100">
  
  <div class="col-lg-4 col-md-6 portfolio-item filter-journal">
    Articles published in journals with IF.
  </div>
  
  <div class="col-lg-4 col-md-6 portfolio-item filter-wp">
    <li>Misak, V. (2022). Crime and weather: Evidence from the Czech Republic (No. 9/2022). IES Working Paper.</li>
    <br>
    <li>Garcia-Bernardo, J., Jansky, P., & Misak, V. (2021). Common Agricultural Policy Beneficiaries: Evidence of Inequality from a New Data Set (No. 4/2021). IES Working Paper.</li>
  </div>

  <div class="col-lg-4 col-md-6 portfolio-item filter-conferences">
    <u> 2022: </u>
    <li>Young Economists Meeting, Brno, Czech Republic</li>
    <li>MAER-Net Colloquium, Kyoto, Japan</li>
  </div>   
</div> 

现有JavaScript #

window.addEventListener('load', () => {
  let portfolioContainer = select('.portfolio-container');
  if (portfolioContainer) {
    let portfolioIsotope = new Isotope(portfolioContainer, {
      itemSelector: '.portfolio-item'
    });

    let portfolioFilters = select('#portfolio-flters li', true);

    on('click', '#portfolio-flters li', function(e) {
      e.preventDefault();
      portfolioFilters.forEach(function(el) {
        el.classList.remove('filter-active');
      });
      this.classList.add('filter-active');

      portfolioIsotope.arrange({
        filter: this.getAttribute('data-filter')
      });
      portfolioIsotope.on('arrangeComplete', function() {
        AOS.refresh()
      });
    }, true);
  }
});

修改方案 #

只需要在现有代码中添加两处逻辑：

1. 初始化Isotope时指定默认筛选条件，对应第一个标签的data-filter值
2. 给第一个筛选标签添加激活类，标记为选中状态

修改后的完整代码：

window.addEventListener('load', () => {
  let portfolioContainer = select('.portfolio-container');
  if (portfolioContainer) {
    // 初始化时设置默认筛选规则
    let portfolioIsotope = new Isotope(portfolioContainer, {
      itemSelector: '.portfolio-item',
      filter: '.filter-journal' // 默认显示期刊论文
    });

    let portfolioFilters = select('#portfolio-flters li', true);
    // 给第一个li标签添加激活样式
    if (portfolioFilters.length > 0) {
      portfolioFilters[0].classList.add('filter-active');
    }

    on('click', '#portfolio-flters li', function(e) {
      e.preventDefault();
      portfolioFilters.forEach(function(el) {
        el.classList.remove('filter-active');
      });
      this.classList.add('filter-active');

      portfolioIsotope.arrange({
        filter: this.getAttribute('data-filter')
      });
      portfolioIsotope.on('arrangeComplete', function() {
        AOS.refresh()
      });
    }, true);
  }
});

效果说明 #

• 页面加载完成后，Isotope会自动过滤内容，只显示带有filter-journal类的元素
• 第一个筛选标签会自动加上filter-active类，保持和点击后一致的选中样式

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