文章/答案/技术大牛

发布

社区首页 >问答首页 >重置一个可战士并在Javascript中赋值

问重置一个可战士并在Javascript中赋值
EN

Stack Overflow用户

提问于 2022-09-23 19:38:37

回答 1查看 25关注 0票数 0

我想要做的是首先将边框设置为我拥有的九个框中的一个，然后当我按下任何1-9键时，边框将被重置为该框。exampl:最初边框设置为一个框，如果按下键盘框中的'2‘，一个边框将被移除，第二个框将得到边框。我可以使选择框按下键，但无法删除前一个框的选择。

这是我的密码

document.addEventListener('keydown', function(event) {
  if (event.key == "ArrowUp") {
    alert('Up was pressed');
  } else if (event.key == "ArrowDown") {
    alert('Down was pressed');
  } else if (event.key == "ArrowLeft") {
    alert('Left was pressed');
  } else if (event.key == "ArrowRight") {
    alert('Right was pressed');
  } else if (event.key == "1") {
    var pressed_box = "one";
    resetBorder();
    setBorder(pressed_box);
  } else if (event.key == "2") {
    var pressed_box = "two";
    resetBorder();
    setBorder(pressed_box);
  } else if (event.key == "3") {
    var pressed_box = "three";
    resetBorder();
    setBorder(pressed_box);
  } else if (event.key == "4") {
    var pressed_box = "four";
    resetBorder();
    setBorder(pressed_box);
    console.log(box_four);
  } else if (event.key == "5") {
    var pressed_box = "five";
    resetBorder();
    setBorder(pressed_box);
    console.log(box_five);
  } else if (event.key == "6") {
    var pressed_box = "six";
    resetBorder();
    setBorder(pressed_box);
    console.log(box_six);
  } else if (event.key == "7") {
    var pressed_box = "seven";
    resetBorder();
    setBorder(pressed_box);
    console.log(box_seven);
  } else if (event.key == "8") {
    var pressed_box = "eight";
    resetBorder();
    setBorder(pressed_box);
    console.log(box_eight);
  } else if (event.key == "9") {
    var pressed_box = "nine";
    resetBorder();
    setBorder(pressed_box);
    console.log(box_nine);
  }
}, true);

const box_main = document.querySelector('.box_main');
const box_one = document.querySelector('.box_one');
const box_two = document.querySelector('.box_two');
const box_three = document.querySelector('.box_three');
const box_four = document.querySelector('.box_four');
const box_five = document.querySelector('.box_five');
const box_six = document.querySelector('.box_six');
const box_seven = document.querySelector('.box_seven');
const box_eight = document.querySelector('.box_eight');
const box_nine = document.querySelector('.box_nine');
var pressed_box;

box_one.classList.add("selection_border");


// check which box is selected
function checkSelection() {

  var box_selection = document.querySelector('.selection_border');
  return box_selection.id;
}
const checkSelection_id = checkSelection();

// add selection_border box
function resetBorder() {
  console.log("asdasd " + checkSelection_id)
  box_main.querySelector("#" + checkSelection_id + "").classList.remove("selection_border");

}

function setBorder(pressed_box) {
  box_main.querySelector("#" + pressed_box + "").classList.add("selection_border");
  var new_selection = box_main.querySelector(".selection_border").id;
  return new_selection;

}

.parent {
  height: 100vh;
}

.box_main {
  width: 350px;
  height: 350px;
  position: relative;
}

.box {
  height: 100px;
  width: 100px;
  background-color: blueviolet;
  position: absolute;
}

.bg_white {
  background-color: #ffffff;
}

.bg_dark_purple {
  background-color: #392947;
}

.bg_dark_blue {
  background-color: #131372;
}

.bg_light_torquise {
  background-color: #66dbff;
}

.bg_light_green {
  background-color: #00865e;
}

.bg_dark_green {
  background-color: #1ba100;
}

.bg_green {
  background-color: #73ff00;
}

.bg_lime {
  background-color: #e7f706;
}

.bg_red {
  background-color: #db2c00;
}

.bg_purple {
  background-color: #f700ff;
}

.box_one {
  top: 0;
  left: 0;
}

.box_two {
  top: 0;
  left: 33%;
}

.box_three {
  top: 0;
  right: 0;
}

.box_four {
  top: 33%;
  left: 0;
}

.box_five {
  top: 33%;
  left: 33%;
}

.box_six {
  top: 33%;
  right: 0;
}

.box_seven {
  bottom: 0;
  left: 0;
}

.box_eight {
  bottom: 0;
  right: 33%;
}

.box_nine {
  bottom: 0;
  right: 0;
}

.selection_border {
  border: 5px dashed !important;
  border-image: linear-gradient(#ffffff, #ff0000, #e5ff00, #2bff00, #00eeff, #ffffff) 10 !important;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jigsaw</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
</head>

<body class="bg-primary">
  <div class="container ">
    <div class="row parent justify-content-center align-items-center">
      <div class="col-4">
        <div class="border border-white border-1   box_main mx-auto">

          <!-- <div class="border border-warning border-4 m-2 box box_one bg_dark_purple"></div> -->
          <div id="one" class="border border-warning border-4 m-2 box  box_one bg_white">1</div>
          <div id="two" class="border border-warning border-4 m-2 box box_two  bg_dark_blue">2</div>
          <div id="three" class="border border-warning border-4 m-2 box box_three bg_light_torquise">3</div>

          <div id="four" class="border border-warning border-4 m-2 box box_four bg_light_green">4</div>
          <div id="five" class="border border-warning border-4 m-2 box box_five bg_dark_green">5</div>
          <div id="six" class="border border-warning border-4 m-2  box box_six bg_green">6</div>

          <div id="seven" class="border border-warning border-4 m-2 box box_seven bg_lime">7</div>
          <div id="eight" class="border border-warning border-4 m-2 box box_eight bg_red">8</div>
          <div id="nine" class="border border-warning border-4 m-2 box box_nine bg_purple">9</div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  <script src="script.js"></script>
</body>

</html>

javascript

variables

variable-assignment

reset

回答 1

Stack Overflow用户

发布于 2022-09-23 19:41:38

您可以简单地针对选定的类在resetBorder中删除它。

box_main.querySelector(".selection_border").classList.remove("selection_border");

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73832262

复制

相似问题

问重置一个可战士并在Javascript中赋值
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问重置一个可战士并在Javascript中赋值EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问重置一个可战士并在Javascript中赋值
EN