JS-如果一个元素的类被切换，其他元素应能够切换的类

时间：2019-07-09 08:20:06

标签： javascript html css

我正在制作剪刀石头布游戏，我只希望用户能够选择一个选择，

基本上，每当我单击选项列表时，其他选项就不应随即被切换，因为我希望用户只能选择一个选项。

第二件事是，我该如何检查用户选择了哪个元素，我想将其存储到let中，但是我是否必须检查哪个元素的特定类（在选项列表中单击）被切换

let randomNumber = Math.floor(Math.random() * 3) + 1;
let optionLists = document.querySelectorAll(".option-list");
let optionListText = document.querySelectorAll(".option-list-text");
let start = 0;
let words = ["paper", "scissors", "rock"];
let randomWord = words[randomNumber];


document.addEventListener("keypress", () => {
  start = 0;
  document.getElementById("starting-title").className = "hidden";
  document.getElementById("game-question").className = "game-question";
  document.getElementById("button").className = "button";

  optionLists.forEach((optionList) => {
    optionList.className = "option-list";
  });
});

optionListText.forEach((option) => {
  option.addEventListener("click", () => {
    option.classList.toggle("option-list-clicked");
  });
});
* {
  outline: 0;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: cursive;
  background: lightgrey;
}

.starting-title {
  position: absolute;
  top: 20%;
  text-transform: uppercase;
  left: 35%;
  font-weight: bold;
  letter-spacing: .2rem;
  text-shadow: 0rem .3rem .5rem black;
  font-size: 4rem;
}

.ending-title {
  position: absolute;
  top: 20%;
  text-transform: uppercase;
  left: 35%;
  font-weight: bold;
  letter-spacing: .2rem;
  text-shadow: 0rem .3rem .5rem black;
  font-size: 4rem;
}

.hidden {
  visibility: hidden;
}

.game-question {
  position: absolute;
  top: 20%;
  text-transform: uppercase;
  left: 35%;
  font-weight: bold;
  letter-spacing: .2rem;
  text-shadow: 0rem .3rem .5rem black;
  font-size: 4rem;
}

.options {
  display: flex;
  flex-direction: row;
  flex: 1 1 1;
  position: absolute;
  top: 50%;
  left: 36%;
}

.option-list {
  margin: 2rem 4rem;
  list-style: none;
  text-decoration: none;
}

.option-list-text {
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: .2rem;
  text-transform: uppercase;
  text-shadow: 0rem .3rem .7rem black;
  cursor: pointer;
}

.option-list-clicked {
  padding: 2rem;
  border-radius: 1rem;
  background: blue;
}

.button {
  position: absolute;
  top: 70%;
  left: 47.5%;
  border: 0;
  font-size: 1.3rem;
  cursor: pointer;
  font-weight: bold;
  padding: 1.3rem;
  border-radius: 1rem;
  background: linear-gradient(to bottom right, rgba(0, 255, 255, 0.596), rgba(0, 0, 255, 0.616), rgba(0, 0, 0, 0.623));
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="/style.css">
  <title>RoPapSis</title>
</head>

<body>
  <h1 id="starting-title" class="starting-title">Press Any Key To Start</h1>
  <h1 id="ending-title" class="ending-title hidden"></h1>


  <h1 id="game-question" class="game-question hidden">Rock, Paper or Scissors</h1>

  <ul id="options" class="options">
    <li id="option-list" class="option-list hidden">
      <p id="scissors" id="option-list-text scissors" class="option-list-text">scissors</p>
    </li>

    <li id="option-list" class="option-list hidden">
      <p id="paper" id="option-list-text paper" class="option-list-text">Paper</p>
    </li>

    <li id="option-list" class="option-list hidden">
      <p id="rock" id="option-list-text rock" class="option-list-text">Rock</p>
    </li>
  </ul>

  <button id="button" class="button hidden">Submit Your Choice</button>


  <script src="/main.js"></script>
</body>

</html>

2 个答案:

答案 0 :(得分：0)

第一点是元素的ID在整个文档中应该是唯一的，因此我们必须将li和p标签的id更改为适当的状态，例如：

<p id="scissors" id="option-list-text scissors" class="option-list-text">scissors</p>

// can be be written as :

<p id="scissors" class="option-list-text">scissors</p>

要仅使一项成为可选项，只需分配要单击的选项列表单击的类，然后将其从其他元素中删除即可。

let selected_id = '';
optionListText.forEach((option) => {
    option.addEventListener("click", () => {
        option.classList.toggle("option-list-clicked");
        selected_id = option.getAttribute('id');
        let NotSelecteds=document.querySelectorAll(".option-list-text:not(#"+selected_id+")")
        NotSelecteds.forEach((option1) => {
           option1.classList.remove('option-list-clicked');
        });
    });
});

请注意，上面代码中的selected_id是第二个问题的答案。

答案 1 :(得分：0)

这里是处理两个问题的修改版本（在clickListener函数中。）请参阅代码中的注释以进行澄清（或询问是否仍然不清楚）。 由您决定单击按钮时还应该发生什么。

原始代码中唯一的问题是使用id属性的方式。 （一个html元素只能有一个id，并且html元素的id属性不能与同一页面上的另一个html元素具有相同的值。） 此版本解决了该问题，消除了一些冗余，并通常简化了操作。

// Global identifiers
const playerOptions = document.getElementsByTagName("LI");
const computerOptionsArray = ["paper", "scissors", "rock"];
let computerSelection, playerSelection;


// Listeners
document.addEventListener("keyup", startGame);
document.addEventListener("click", clickListener);


// Functions

function startGame(){

  // Hides #starting-title and shows everything else 
  document.getElementById("starting-title").classList.add("hidden");
  document.getElementById("game-question").classList.remove("hidden");
  document.getElementById("button").classList.remove("hidden");
  Array.from(playerOptions).forEach(
    (li) => { li.classList.remove("hidden"); }
  );

  // Randomizes computerSelection
  let randomZeroOneOrTwo = Math.floor(Math.random() * 3); // No need to add 1
  computerSelection = computerOptionsArray[randomZeroOneOrTwo];

  // Clears playerSelection
  playerSelection = null;
}

function clickListener(event){
  // When user clicks an LI element, if `playerSelection` is empty, this function highlights the 
  //   clicked element, and assign the value of its `id` attribute to `playerSelection` 

  Array.from(playerOptions).forEach( (li) => {
    if(li == event.target){ // If click was on an "LI", remember its `id` attribute's value
      if(playerSelection){ return; } // End function here if player already chose
      event.target.classList.add("selected"); // Highlight the clicked LI
      playerSelection = event.target.id; // Store the players selection

    }
  });
  if(event.target.id == "button"){
    // Respond to clicks on the button here

      // Logs the selections
      console.log(`player chose ${playerSelection}, computer chose ${computerSelection}`);
      // Maybe change this to something like: 
      //   If playerSelection is not empty...
      //     compare it to computerSelection, announce result, and reset game
  
  }
}
* { outline: 0; }

html { font-size: 62.5%; box-sizing: border-box; }

body { margin: 0; padding: 0; font-family: cursive; background: lightgrey; }

button { margin-left: 24rem; border: 0; font-size: 1.3rem; cursor: pointer; font-weight: bold; padding: 1.3rem; border-radius: 1rem; background: linear-gradient(to bottom right, rgba(0, 255, 255, 0.596), rgba(0, 0, 255, 0.616), rgba(0, 0, 0, 0.623)); }

ul { display: flex; flex-direction: row; flex: 1 1 1; margin-left: 6rem; }

li { margin: 1rem; list-style: none; text-decoration: none; font-size: 2rem; padding: 1rem; font-weight: bold; letter-spacing: .2rem; text-transform: uppercase; text-shadow: 0rem .3rem .7rem black; cursor: pointer; }

.hidden { visibility: hidden; }

.selected { border-radius: 1rem; background: blue; }

.title { margin-left: 6rem; text-transform: uppercase; font-weight: bold; letter-spacing: .2rem; text-shadow: 0rem .3rem .5rem black; font-size: 3rem; }
<!DOCTYPE html>
<html>
<head></head>
<body>
  <h1 id="starting-title" class="title">Press Any Key To Start</h1>
  <h1 id="game-question" class="title hidden">Rock, Paper or Scissors</h1>
  <ul>
    <li id="scissors" class="hidden">Scissors</li>
    <li id="paper" class="hidden">Paper</li>
    <li id="rock" class="hidden">Rock</li>
  </ul>
  <button id="button" class="hidden">Submit Your Choice</button>
</body>
</html>

相关问题
最新问题