点击到天、周、月时的时间跟踪页面切换按钮

Question

我的目标是增加 timeframes and previousTimeframes variable 中的 data object 以便在单击按钮时将小时值更改为每日、每周和每月。

在我的 weeklybtn 中，我有一个 addEventListener，单击它时将运行每周函数。在每周功能内，它将激活每周按钮，并删除每日和每月按钮。我还在数据中添加了一个 for 循环，以增加每周当前和之前的值。当我 console.log(weeklycurrent) 或 console.log(weeklyprevious) 时，我可以访问这些值，这不是问题。我还在时间范围内使用 forEach 来访问 HTML 文件中的 timeframes class 并在内部循环 weeklycurrent 的值，但它在每个时间范围内递增并且根本没有循环。

关于如何修复它有什么建议吗？

let data = [
    {
      "title": "Work",
      "timeframes": {
        "daily": {
          "current": 5,
          "previous": 7
        },
        "weekly": {
          "current": 32,
          "previous": 36
        },
        "monthly": {
          "current": 103,
          "previous": 128
        }
      }
    },
    {
      "title": "Play",
      "timeframes": {
        "daily": {
          "current": 1,
          "previous": 2
        },
        "weekly": {
          "current": 10,
          "previous": 8
        },
        "monthly": {
          "current": 23,
          "previous": 29
        }
      }
    },
    {
      "title": "Study",
      "timeframes": {
        "daily": {
          "current": 0,
          "previous": 1
        },
        "weekly": {
          "current": 4,
          "previous": 7
        },
        "monthly": {
          "current": 13,
          "previous": 19
        }
      }
    },
    {
      "title": "Exercise",
      "timeframes": {
        "daily": {
          "current": 1,
          "previous": 1
        },
        "weekly": {
          "current": 4,
          "previous": 5
        },
        "monthly": {
          "current": 11,
          "previous": 18
        }
      }
    },
    {
      "title": "Social",
      "timeframes": {
        "daily": {
          "current": 1,
          "previous": 3
        },
        "weekly": {
          "current": 5,
          "previous": 10
        },
        "monthly": {
          "current": 21,
          "previous": 23
        }
      }
    },
    {
      "title": "Self Care",
      "timeframes": {
        "daily": {
          "current": 0,
          "previous": 1
        },
        "weekly": {
          "current": 2,
          "previous": 2
        },
        "monthly": {
          "current": 7,
          "previous": 11
        }
      }
    }
  ];
  
  const dailybtn = document.querySelector(".dailybtn");
const weeklybtn = document.querySelector(".weeklybtn");
const monthlybtn = document.querySelector(".monthlybtn");
const timeframes = document.querySelectorAll(".timeframes");
const previousTimeframes = document.querySelectorAll(".previoustimeframes");



weeklybtn.addEventListener("click", function weekly () {
    weeklybtn.classList.add("active");
    monthlybtn.classList.remove("active");
    dailybtn.classList.remove("active");
 for (let i of data) {
     let weeklycurrent = i.timeframes.weekly.current;
     let weeklyprevious = i.timeframes.weekly.previous;

    
     timeframes.forEach(x => {
     x.textContent = `${weeklycurrent}hrs`;
    console.log(x)
    })
    
    previousTimeframes.forEach(y => {
        y.textContent = `Last Week - ${weeklyprevious}hrs`
    })  
    //  console.log(weeklyprevious)
     console.log(weeklycurrent)
 }
 
 });

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  
  <title>Frontend Mentor | Time tracking dashboard</title>
  <link rel="stylesheet" type="text/css" href="style.css" media="screen" />

  <!-- Feel free to remove these styles or customise in your own stylesheet  -->
  <style>
    .attribution { font-size: 11px; text-align: center; }
    .attribution a { color: hsl(228, 45%, 44%); }
  </style>
</head>
<body>

  <div class="container">
    <div class="navigation">
      <div class="navA">
          <img class="jeremy" src="./images/image-jeremy.png" alt="Jeremy's picture">
        <div class="navtext">
          <p class="navbody">Report for</p>
         <h1> Jeremy Robson</h1>  
        </div>
      </div>
        <ul>
          <li class="dailybtn">Daily</li>
          <li class="weeklybtn">Weekly</li>
          <li class="monthlybtn">Monthly</li>
        </ul>
      
    </div>
 
   <div class="table">
     <div class="content" id="work">
       <!-- <img src="./images/icon-work.svg" alt=""> -->
       <div class="contenttext">
         <h5>Work</h5>
         <img class="ellipsis" src="./images/icon-ellipsis.svg" alt="">
         <h3 class="timeframes">5hrs</h3>
         <p class="previoustimeframes">Yesterday - 7hrs</p>
         <h3 class="daily">5hrs <!-- daily --></h3>
            <p class="yesterday">Yesterday - 7hrs <!-- daily --></p>
        <h3 class="weekly">32hrs <!-- weekly --> </h3>
            <p class="lastweek">Last Week - 36hrs <!-- weekly --></p>
         <h3 class="monthly">103hrs <!-- monthly --></h3>
         <p class="lastmonth">Last Month - 128hrs <!-- monthly --> </p>
       </div>
     </div>

    <div class="content" id="play">
      <!-- <img src="./images/icon-play.svg" alt=""> -->
      <div class="contenttext">       
        <h5>Play</h5>
        <img class="ellipsis" src="./images/icon-ellipsis.svg" alt="">
        <h3 class="timeframes">1hr</h3>
         <p class="previoustimeframes">Yesterday - 2hrs</p>
        <h3 class="daily">1hr <!-- daily --></h3>
          <p class="yesterday">Yesterday - 2hrs <!-- daily --></p>
        <h3 class="weekly">10hrs <!-- weekly --></h3>
          <p class="lastweek">Last Week - 8hrs <!-- weekly --></p>
        <h3 class="monthly">23hrs <!-- monthly --></h3>
          <p class="lastmonth">Last Month - 29hrs <!-- monthly --></p>
      </div>
     </div>

    <div class="content" id="study">
      <!-- <img class="imgcontent" src="./images/icon-study.svg" alt=""> -->
      <div class="contenttext">       
        <h5>Study</h5>
        <img class="ellipsis" src="./images/icon-ellipsis.svg" alt="">
        <h3 class="timeframes">0hrs </h3>
         <p class="previoustimeframes">Yesterday - 1hr </p>
           <h3 class="daily">0hrs <!-- daily --></h3>
          <p class="yesterday">Yesterday - 1hr <!-- daiLast Monthly --></p>
        <h3 class="weekly">4hrs <!-- weekly --></h3>
          <p class="lastweek">Last Week - 7hrs <!-- weekly --></p>
        <h3 class="monthly">13hrs <!-- monthly --></h3>
          <p class="lastmonth">Last Month - 19hrs <!-- monthly --></p>
      </div>
    </div>

    <div class="content" id="exercise">
      <!-- <img src="./images/icon-exercise.svg" alt=""> -->
      <div class="contenttext">      
        <h5>Exercise</h5>
        <img class="ellipsis" src="./images/icon-ellipsis.svg" alt="">
        <h3 class="timeframes">1hr </h3>
         <p class="previoustimeframes">Yesterday - 1hr</p>
     <h3 class="daily">1hr <!-- daily --></h3>
          <p class="yesterday">Yesterday - 1hr <!-- daily --></p>
        <h3 class="weekly">4hrs <!-- weekly --></h3>
          <p class="lastweek">Last Week - 5hrs <!-- weekly --></p>
        <h3 class="monthly">11hrs <!-- monthly --></h3>
          <p class="lastmonth">Last Month - 18hrs <!-- monthly --></p>
      </div>
    </div>

    <div class="content" id="social">
      <!-- <img src="./images/icon-social.svg" alt=""> -->
      <div class="contenttext">     
        <h5>Social</h5>
        <img class="ellipsis" src="./images/icon-ellipsis.svg" alt="">
        <h3 class="timeframes">1hr </h3>
         <p class="previoustimeframes">Yesterday - 3hrs</p>
         <h3 class="daily">1hr <!-- daily --></h3>
          <p class="yesterday">Yesterday - 3hrs <!-- daily --></p>
        <h3 class="weekly">5hrs <!-- weekly --></h3>
          <p class="lastweek">Last Week - 10hrs <!-- weekly --></p>
        <h3 class="monthly">21hrs <!-- monthly --></h3>
          <p class="lastmonth">Last Month - 23hrs <!-- monthly --></p>
      </div>
    </div>

    <div class="content" id="selfcare">
      <!-- <img src="./images/icon-self-care.svg" alt=""> -->
      <div class="contenttext">       
        <h5>Self Care</h5>
        <img class="ellipsis" src="./images/icon-ellipsis.svg" alt="">
        <h3 class="timeframes">0hrs</h3>
         <p class="previoustimeframes">Yesterday - 1hr</p>
     <h3 class="daily">0hrs <!-- daily --></h3>
          <p class="yesterday">Yesterday - 1hr <!-- daily --></p>
        <h3 class="weekly">2hrs <!-- weekly --></h3>
          <p class="lastweek">Last Week - 2hrs <!-- weekly --></p>
        <h3 class="monthly">7hrs <!-- monthly --></h3>
          <p class="lastmonth">Last Month - 11hrs <!-- monthly --></p>
      </div>
    </div>
  
   </div> 
  
  </div>
  
  <footer class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">paumnc</a>.
  </footer>
  <script src="script.js"></script>
</body>
</html>

Answer 1

假设您有与数据数组中的元素相同数量的 timeframe 和 previousTimeframe 元素，试一试（用这个 forEach 替换您的 for 循环）- 这里我使用当前元素的索引来引用希望是正确的 timeframe/previousTimeframe 元素。

data.forEach((i, index) => { 
  let weeklycurrent = i.timeframes.weekly.current;
  let weeklyprevious = i.timeframes.weekly.previous;

  if (timeframes[index]) {
    timeframes[index].textContent = `${weeklycurrent}hrs`;
  }
  
  if (previousTimeframes[index]) {
    previousTimeframes[index].textContent = `Last Week - ${weeklyprevious}hrs`;
  }
});

点击到天、周、月时的时间跟踪页面切换按钮

Time tracking page switching buttons when click to days, weeks and months

javascript

for-loop

addeventlistener