Javascript 按钮作为复选框并更改样式？

在我的作业中，我只允许使用按钮，所以没有复选框。单击按钮后，将显示中的某些信息。我的代码正在运行，但我的问题是，当再次单击按钮时，如何让类显示：none？有点像开关

const displayScores = (e) => {
    if (
      (e.target.parentNode.querySelector(
        ".display-score-container"
      ).style.display = "none")
    ) {
      e.target.parentNode.querySelector(
        ".display-score-container"
      ).style.display = "block";
      e.target.innerHTML = "-";
    } else {
      e.target.parentNode.querySelector(
        ".display-score-container"
      ).style.display = "none";
      e.target.innerHTML = "+";
    }
  };






return (
<div className="student-container">
              <img className="student-img" src={students.pic} />
              <div className="student-column">
                <p className="student-item">
                  {" "}
                  {students.firstName} {students.lastName}
                </p>
                <p className="student-item">Email: {students.email}</p>
                <p className="student-item">Company: {students.company}</p>
                <p className="student-item">Skill: {students.skill}</p>
                <p className="student-item">Average: {average}%</p>

                <div className="display-score-container">
                  <p className="student-score">
                    Test 1:{" "}
                    <p className="student-percentage">{students.grades[0]}%</p>
                  </p>
                  
                </div>
              </div>

              <button
                
                onClick={displayScores}
                className="expand-btn"
              >
                +
              </button>
)

const displayScores=（e）=>{
如果(
（e.target.parentNode.querySelector）(
“.display score容器”
).style.display=“无”）
) {
e、 target.parentNode.querySelector(
“.display score容器”
).style.display=“块”；
e、 target.innerHTML=“-”；
}否则{
e、 target.parentNode.querySelector(
“.display score容器”
).style.display=“无”；
e、 target.innerHTML=“+”；
}
};
返回(

{" "}
{students.firstName}{students.lastName}

电子邮件：{students.Email}
公司：{students.Company}

技能：{students.Skill}

平均值：{Average}%

测试1:{'}
{students.grades[0]}%

+
)

您可以使用“active”类或某个类，并为特定的类名编写css。单击将该类添加到按钮并切换值。

---

并将条件放在您添加的类上if（active）{..}else{..}。

您可以使用

React.useState

跟踪

displayScore

，并根据状态更新模板

const [displayScore, setDisplayScore] = React.useState(true);

const handleDisplayScores = (e) => {
    setDisplayScore(!displayScore);
  };
          

return (
   <div className="student-container">
              <img className="student-img" src={students.pic} />
              <div className="student-column">
                <p className="student-item">
                  {" "}
                  {students.firstName} {students.lastName}
                </p>
                <p className="student-item">Email: {students.email}</p>
                <p className="student-item">Company: {students.company}</p>
                <p className="student-item">Skill: {students.skill}</p>
                <p className="student-item">Average: {average}%</p>

                {displayScore && (<div  className="display-score-container">
                  <p className="student-score">
                    Test 1:{" "}
                    <p className="student-percentage">{students.grades[0]}% 
                     </p>
                  </p>
                </div>)}

              </div>

              <button  
                onClick={handleDisplayScores}
                className="expand-btn">
                {displayScore ? '-' : '+'}  // set based on your use case.
              </button>
)

const[displayScore，setDisplayScore]=React.useState（true）；
常量处理显示分数=（e）=>{
setDisplayScore（！displayScore）；
};
返回(

{" "}
{students.firstName}{students.lastName}

电子邮件：{students.Email}
公司：{students.Company}

技能：{students.Skill}

平均值：{Average}%
{displayScore&&(

测试1:{'}
{students.grades[0]}%


)}
{displayScore？'-'：'+'}//根据您的用例进行设置。
)

这里有一个简单的方法。 它正在工作

const displayScores = e => {
            if (e.target.innerHTML === '+') {
                document.querySelector('.display-score-container').style.display =
                    'none';
                e.target.innerHTML = '-';
            } else {
                document.querySelector('.display-score-container').style.display =
                    'block';
                e.target.innerHTML = '+';
            }
        };

当然，这不是唯一的解决办法。这取决于你的洞项目。 希望我能帮助你。祝你今天愉快：）