javascript - 按钮充当复选框并更改样式？

问题描述

在我的任务中，我只被允许使用一个按钮，所以没有复选框。单击按钮，显示某些信息。我的代码正在运行，但我的问题是如何让类显示：无，再次单击按钮时？有点像拨动？

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>
)

标签： javascriptreactjsjsx

javascript - 按钮充当复选框并更改样式？

问题描述

解决方案

推荐阅读