时间戳

首页 > 解决方案 > 有没有更有效的方法来编写我的 JS？

javascript - 有没有更有效的方法来编写我的 JS？

问题描述

所以我有一排按钮

        <form class="form">
      <div class="button-box">
        <div class="centered-buttons">
          <input type="radio" name="game" id="rock-button" class="radio" />
          <label for="rock-button">rock</label>
          <br />
          <input type="radio" name="game" id="paper-button" class="radio" />
          <label for="paper-button">Paper</label>
          <br />
          <input
            type="radio"
            name="game"
            id="scissor-button"
            class="radio"
          />
          <label for="scissor-button">Scissor</label>
        </div>
      </div>

      <input type="submit" id="submit-btn" value="submit" />
    </form>

当按下特定按钮（例如岩石）时，将显示岩石的图像

        <figure class="image-box">
      <img
        src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.DYZMAUANlCkZudy3ecHIjgHaFj%26pid%3DApi&f=1"
        class="image"
        id="rock-user"
      />
      <img
        src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.nsZw2P8S_bGSFs1D8tUWQwHaHZ%26pid%3DApi&f=1"
        alt=""
        class="image"
        id="paper-user"
      />
      <img
        src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.dcE8dnULs2C6_wjBABvd4QHaEk%26pid%3DApi&f=1"
        alt=""
        class="image"
        id="scissor-user"
      />
    </figure>

但是我的代码很长，可能有点重复。我怎样才能让我的 JS 更有效？

let rock = document.getElementById("rock-button")

rock.addEventListener("click", changePicToRock)

function changePicToRock(e){

  document.getElementById("paper-user").style.display = "none"
  document.getElementById("scissor-user").style.display = "none"
  document.getElementById("rock-user").style.display = "block"

}

let paper = document.getElementById("paper-button")

paper.addEventListener("click", changePicToPaper)

function changePicToPaper(e){

  document.getElementById("paper-user").style.display = "block"
  document.getElementById("scissor-user").style.display = "none"
  document.getElementById("rock-user").style.display = "none"
}


let scissor = document.getElementById("scissor-button")

scissor.addEventListener("click", changePicToScissor)

function changePicToScissor(e){

  document.getElementById("paper-user").style.display = "none"
  document.getElementById("scissor-user").style.display = "block"
  document.getElementById("rock-user").style.display = "none"

}

简而言之，当按下按钮时，与该按钮相关的图像将获得该属性display: block;，而我不想显示的所有其他图像都将获得该属性display: none;

标签： javascripthtmlcssfunctiondom

解决方案

尝试这个

const game = [{ title: 'rock', values: ['none', 'none', 'block'] },
{ title: 'paper', values: ['block', 'none', 'none'] },
{ title: 'scissor', values: ['none', 'block', 'none'] }];

game.forEach(item => {
  const button = document.getElementById(`${item.title}-button`);
  button.addEventListener("click", () => {
    console.log(item);
    document.getElementById("paper-user").style.display = item.values[0]
    document.getElementById("scissor-user").style.display = item.values[1]
    document.getElementById("rock-user").style.display = item.values[2]
  })
})

推荐阅读