用于切换css类的Javascript函数未按预期工作

slmsl1lt  于 2023-02-28  发布在  Java
关注(0)|答案(2)|浏览(130)

我有一个使用td元素创建一个5*4网格的HTML文件。每个td元素都有它的css类和一堆属性。
我试图切换我的元素的css类的按钮点击。例如，如果我点击'向上'按钮，每行的css类应该与下面一行的css类交换，第一行应该到最后一行。

function switchColorUp() {

  var allTDs = document.getElementsByTagName("td");

  

 for (var i = 0; i < allTDs.length; i++) {

  allTDs[i].classList = allTDs[(i + 4) % 20].classList;

   }

}

Codepen链接-
https://codepen.io/001Abhishek/pen/NWzrZyg
除了第二行的css同时与第一行和最后一行重叠外，它工作正常。因此，第一行的css丢失（检查codepen链接以验证此行为）
我好像不知道该怎么处理这个案子。如果能提供帮助，我将不胜感激。
我试着将第一行元素保存在tempvar中，然后将它们与最后一行交换，并运行for循环，直到倒数第二行。

JavaScript

2条答案

按热度按时间
9nvpjoqh

9nvpjoqh1#

第一行的css丢失的原因是for循环覆盖了前4个值，循环的最后4次迭代（即i = 16，17，18，19）将得到覆盖的前4个元素的css。
将第一行元素保存到temp var中也不起作用的原因是，classList返回一个从documentation看到的活动DOMTokenList，它本质上是一个引用。
我的解决方案包括使用toString()函数将前4个元素保存为值：

function switchColorUp() {
  var allTDs = document.getElementsByTagName("td");
  var temp1 = allTDs[0].classList.toString();
  var temp2 = allTDs[1].classList.toString();
  var temp3 = allTDs[2].classList.toString();
  var temp4 = allTDs[3].classList.toString();
  
 for (var i = 0; i < allTDs.length; i++) {
  allTDs[i].classList = allTDs[(i + 4) % 20].classList;
 }
  allTDs[16].classList = temp1
  allTDs[17].classList = temp2;
  allTDs[18].classList = temp3;
  allTDs[19].classList = temp4;
}
body {
  background-color: black;
}
.table {
  font-size: 1.5em;
  color: white;
  font-style: times new roman;
}
.td1 {
  border: 6px solid red;
}
.td1:hover {
  background-color: red;
  color: black;
  transform: scale(1.2);
  opacity: 1;
  transition: 0.5s;
}
.td2 {
  border: 6px solid green;
}
.td2:hover {
  background-color: green;
  color: black;
  transform: scale(1.2);
  opacity: 1;
  transition: 0.5s;
}
.td3 {
  border: 6px solid orangered;
}
.td3:hover {
  background-color: orangered;
  color: black;
  transform: scale(1.2);
  opacity: 1;
  transition: 0.5s;
}
.td4 {
  border: 6px solid blue;
}
.td4:hover {
  background-color: blue;
  color: black;
  transform: scale(1.2);
  opacity: 1;
  transition: 0.5s;
}
.td5 {
  border: 6px solid purple;
}
.td5:hover {
  background-color: purple;
  color: black;
  transform: scale(1.2);
  opacity: 1;
  transition: 0.5s;
}
.td6 {
  border: 6px solid brown;
}
.td6:hover {
  background-color: brown;
  color: black;
  transform: scale(1.2);
  opacity: 1;
  transition: 0.5s;
}
.td7 {
  border: 6px solid YELLOW;
}
.td7:hover {
  background-color: yellow;
  color: black;
  transform: scale(1.2);
  opacity: 1;
  transition: 0.5s;
}
.td8 {
  border: 6px solid silver;
}
.td8:hover {
  background-color: silver;
  color: black;
  transform: scale(1.2);
  opacity: 1;
  transition: 0.5s;
}
.td9 {
  border: 6px solid pink;
}
.td9:hover {
  background-color: pink;
  color: black;
  transform: scale(1.2);
  opacity: 1;
  transition: 0.5s;
}

.td10 {
  border: 6px solid cyan;
}
.td10:hover {
  background-color: cyan;
  opacity: 1;
  color: black;
  transform: scale(1.2);
  transition: 0.5s;
}
.td11 {
  border: 6px solid lightgreen;
}
.td11:hover {
  background-color: lightgreen;
  opacity: 1;
  color: black;
  transform: scale(1.2);
  transition: 0.5s;
}
.td12 {
  border: 6px solid teal;
}
.td12:hover {
  background-color: teal;
  opacity: 1;
  color: black;
  transform: scale(1.2);
  transition: 0.5s;
}

.td13 {
  border: 6px solid navy;
}
.td13:hover {
  background-color: navy;
  opacity: 1;
  color: black;
  transform: scale(1.2);
  transition: 0.5s;
}

.td14 {
  border: 6px solid salmon;
}
.td14:hover {
  background-color: salmon;
  opacity: 1;
  color: black;
  transform: scale(1.2);
  transition: 0.5s;
}

.td15 {
  border: 6px solid olive;
}
.td15:hover {
  background-color: olive;
  opacity: 1;
  color: black;
  transform: scale(1.2);
  transition: 0.5s;
}

.td16 {
  border: 6px solid darkslategray;
}
.td16:hover {
  background-color: darkslategray;
  opacity: 1;
  color: black;
  transform: scale(1.2);
  transition: 0.5s;
}

.td17 {
  border: 6px solid magenta;
}
.td17:hover {
  background-color: magenta;
  opacity: 1;
  color: black;
  transform: scale(1.2);
  transition: 0.5s;
}

.td18 {
  border: 6px solid white;
}
.td18:hover {
  background-color: white;
  opacity: 1;
  color: black;
  transform: scale(1.2);
  transition: 0.5s;
}

.td19 {
  border: 6px solid khaki;
}
.td19:hover {
  background-color: khaki;
  opacity: 1;
  color: black;
  transform: scale(1.2);
  transition: 0.5s;
}

.td20 {
  border: 6px solid yellowgreen;
}
.td20:hover {
  background-color: yellowgreen;
  opacity: 1;
  color: black;
  transform: scale(1.2);
  transition: 0.5s;
}
.btn1 {
  height: 550px;
  width: 400px;
  position: relative;
  margin: -570px 500px;
  background-color: rgba(0, 0, 0, 0.7);
  box-shadow: 1px 1px 10px 5px deepskyblue;
}

.button {
  cursor: pointer;
  position: absolute;
  left: 105px;
  top: 100px;
  color: deepskyblue;
  background-color: transparent;
  border-radius: 10%;
  border: 1px solid deepskyblue;
}

.button1 {
  background-color: transparent;
  cursor: pointer;
  color: deepskyblue;
  border: 1px solid deepskyblue;
  position: absolute;
  left: 40px;
  top: 150px;
  border-radius: 10%;
}

.button2 {
  cursor: pointer;
  color: deepskyblue;
  background-color: transparent;
  border: 1px solid deepskyblue;
  border-radius: 10%;

  position: absolute;
  left: 160px;
  top: 150px;
}

.button3 {
  color: deepskyblue;
  background-color: transparent;
  cursor: pointer;
  border: 1px solid deepskyblue;
  position: absolute;
  left: 100px;
  top: 200px;
  border-radius: 10%;
}
.name11 {
  color: deepskyblue;
  position: absolute;
  left: 5px;
  top: 250px;
}
.butt {
  cursor: pointer;
  position: absolute;
  left: 60px;
  top: 310px;
  color: deepskyblue;
  background-color: deepskyblue;
  border-radius: 50%;
  border: 1px solid deepskyblue;
}

.butt1 {
  cursor: pointer;
  position: absolute;
  left: 180px;
  top: 310px;
  color: deepskyblue;
  background-color: deepskyblue;
  border-radius: 50%;
  border: 1px solid deepskyblue;
}

.butt2 {
  cursor: pointer;
  position: absolute;
  left: 180px;
  top: 380px;
  color: deepskyblue;
  background-color: deepskyblue;
  border-radius: 50%;
  border: 1px solid deepskyblue;
}

.butt3 {
  cursor: pointer;
  position: absolute;
  left: 60px;
  top: 380px;
  color: deepskyblue;
  background-color: deepskyblue;
  border-radius: 50%;
  border: 1px solid deepskyblue;
}

.name {
  color: deepskyblue;
  position: absolute;
  left: 5px;
  top: 5px;
}

.pass {
  color: deepskyblue;
  font-size: 1em;
  font-family: book antiqua;
  position: absolute;
  left: 40px;
  top: 450px;
}
.pass:click {
  border: 1px solid deepskyblue;
}
<html>

<head>
  <title>login system</title>
  <link rel="stylesheet" type="text/css" href="login.css">
</head>

<body>

  <table class="table" cellpadding=6px cellspacing=10px>

    <tr>
      <td class="td1">
        A &nbsp&nbsp B<br><br>C &nbsp&nbsp D
      </td>

      <td class="td2">
        U &nbsp&nbsp V<br><br>W &nbsp&nbsp X
      </td>

      <td class="td3">
        = &nbsp&nbsp&nbsp&nbsp (<br><br>+ &nbsp&nbsp&nbsp _
      </td>

      <td class="td4">
        a &nbsp&nbsp&nbsp&nbsp b<br><br>c &nbsp&nbsp&nbsp&nbsp d
      </td>
    </tr>

    <tr>
      <td class="td5">
        E &nbsp&nbsp F<br><br>G &nbsp&nbsp H
      </td>

      <td class="td6">
        Y &nbsp&nbsp&nbsp Z<br><br>1 &nbsp&nbsp&nbsp&nbsp 2
      </td>

      <td class="td7">
        { &nbsp&nbsp&nbsp&nbsp ]<br><br>$ &nbsp&nbsp&nbsp&nbsp !
      </td>

      <td class="td8">
        e &nbsp&nbsp&nbsp&nbsp f<br><br>g &nbsp&nbsp&nbsp h
      </td>
    </tr>

    <tr>
      <td class="td9">
        I &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp J<br><br>K &nbsp&nbsp&nbsp L
      </td>

      <td class="td10">
        3 &nbsp&nbsp&nbsp&nbsp 4<br><br>5 &nbsp &nbsp&nbsp 6
      </td>

      <td class="td11">
        i &nbsp&nbsp&nbsp&nbsp&nbsp j<br><br>k &nbsp &nbsp&nbsp l
      </td>

      <td class="td12">
        m &nbsp&nbsp n<br><br>o &nbsp &nbsp&nbsp p
      </td>
    </tr>

    <tr>
      <td class="td13">
        M &nbsp&nbsp N<br><br>O &nbsp &nbsp&nbsp P
      </td>

      <td class="td14">
        7 &nbsp&nbsp&nbsp&nbsp 8<br><br>9 &nbsp &nbsp&nbsp 0
      </td>

      <td class="td15">
        y &nbsp&nbsp&nbsp&nbsp z<br><br>} &nbsp&nbsp&nbsp %
      </td>

      <td class="td16">
        ^ &nbsp&nbsp&nbsp&nbsp [<br><br>: &nbsp&nbsp&nbsp&nbsp&nbsp ;
      </td>
    </tr>

    <tr>
      <td class="td17">
        Q &nbsp&nbsp R<br><br>S &nbsp &nbsp&nbsp T
      </td>

      <td class="td18">
        * &nbsp&nbsp&nbsp&nbsp #<br><br>@ &nbsp&nbsp&nbsp )
      </td>

      <td class="td19">
        q &nbsp&nbsp&nbsp&nbsp r<br><br>s &nbsp &nbsp&nbsp t
      </td>

      <td class="td20">
        u &nbsp&nbsp&nbsp&nbsp v<br><br>w &nbsp&nbsp&nbsp x
      </td>
    </tr>

  </table>

  <div class="btn1">

    <button class="button" type="button" onclick="switchColorUp()">UP</button>

    <button class="button1" type="button" onclick="switchColorLeft()">LEFT</button>

    <button class="button2" type="button" onclick="switchColorRight()">RIGHT</button>

    <button class="button3" type="button" onclick="switchColorDown()">DOWN</button>
    <div class="name">
      <p><u>Button To Switch Color Between Boxes:-</u></p>
    </div>
    <div class="pass">
      <u>Password:-</u><br><br><input size="40" type="password" style="border:1px solid deepskyblue;background-c
olor:black;color:deepskyblue;" name="User_password">
    </div>

    <button class="butt" type="button">.</button>

    <button class="butt1" type="button">.</button>

    <button class="butt2" type="button">.</button>

    <button class="butt3" type="button">.</button>

    <div class="name11">
      <p><u>Button To Select Character From Boxes:-</u></p>
    </div>
  </div>
</body>

</html>

希望能有所帮助！

赞(0）分享  回复(0）举报  2023-02-28
0yycz8jy

0yycz8jy2#

也许，我不理解您的目的，我不理解交换相邻行时(i+4)%20的用法;另外，在整个数组行中运行循环将在捕获旧值之前覆盖行，并且(i+4)%20将超出数组的大小。
从问题的文本来看，第一个代码段似乎是按照您希望的方式移动数组值。
另外，既然你知道你的表结构是固定的或者包含一个重复的模式，你可以在table或者tr元素上使用:nth-child选择器来创建css样式，然后改变table或者tr元素上的样式，那么所有的td元素都将改变，而不需要这个交换。但是你需要为每一种可能的组合创建一个集合。参见第二个代码片段中的说明。

var allTDs = [],
    div = document.querySelector('DIV');
for (let i = 0; i < 10; i++) allTDs[i] = "c" + (i+1);
div.textContent = allTDs.join('---');

document.body.addEventListener("click", shiftClass, false);

function shiftClass () {
  let e = event.target;
  if ( e.matches('button.up, button.up *') ) {
    let last = allTDs.length-1,
        temp = allTDs[0];
    for (var i = 0; i < last; i++) {
      allTDs[i] = allTDs[i+1];
    }
    allTDs[last] = temp;
    div.textContent = allTDs.join('---');
  } else if ( e.matches('button.dn, button.dn *') ) {
    let last = allTDs.length-1,
        temp = allTDs[last];
    for (var i = last; i > 0; i--) {
      allTDs[i] = allTDs[i-1];
    }
    allTDs[0] = temp;
    div.textContent = allTDs.join('---');
  }
}
<button class="up">Up</button><button class="dn">Down</button>
<div></div>

一个一个二个一个一个一个三个一个一个一个一个一个四个一个

赞(0）分享  回复(0）举报  2023-02-28
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com