Question

HTML编码新手
我试图通过改变他们的类
块A，块B，块C
使用一个按钮（下一个）

应该发生什么。

单击1：

块A（位置1）; B栏（第2位）;块C（位置3）

单击2：

块A（位置3）; B栏（位置1）;块C（位置2）

点击3：

块A（位置2）; B栏（第3位）;块C（位置1）

我可以让第一次点击动作发生，但第二次和第三次点击，我很难编码。请参阅下面的代码并提前感谢您

<!DOCTYPE html>
    <html>
    <head>
    <style>
    .center {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 100%;
    }

    .topleft {
        position: absolute;
        top: 8px;
        left: 16px;
    }

    .topright {
        position: absolute;
        top: 8px;
        right: 16px;
    }

    #blockA{
    background-color: lightblue;
    height: 100px;
    width: 100px;
    }
    #blockB{
    background-color: red;
    height: 100px;
    width: 100px;
    }
    #blockC{
    background-color: green;
    height: 100px;
    width: 100px;
    }

    .footer {
        margin-left: auto;
        margin-right: auto;
        position: absolute;
        bottom: 0;
        height: 50px;
        width: 100%;
        background-color: #eee;

    }
    .holder{
       height:20px; 
        width:100px; 
        margin: -20px -50px; 
        position:relative;
        top:50%; 
        left:50%;
    }

    </style>
    </head>

    <body>

    <div id="blockA" class="center"  > blockA </div>
    <div id="blockB" class="topleft" > blockB </div>
    <div id="blockC" class="topright"> blockC </div>

    <div class="footer">
    <div class="holder">

    <button class="button" onclick="back()">Back</button>
    <button class="button" onclick="next()">Next</button>
    </div>
    </div>


    <script>
    function next() {
     document.getElementById("blockA").className = "topright";  
     document.getElementById("blockB").className = "center";
     document.getElementById("blockC").className = "topleft";
    }

    function back() {
     document.getElementById("blockA").className = "center";  
     document.getElementById("blockB").className = "topleft";
     document.getElementById("blockC").className = "topright";
    }

    </script>
    </body>
    </html>

Answer 1

问题是您需要对类进行硬编码。每次调用next时，它都会完全相同。因此，点击一下后，您将看不到任何差异。

以下是执行所需操作的代码：

var classes = ['topright', 'center', 'topleft'];

function next() {
  var c = classes.shift();
  classes.push(c);
  set();
}

function back() {
  var c = classes.pop();
  classes.unshift(c);
  set();
}


function set() {
  document.getElementById("blockA").className = classes[0];
  document.getElementById("blockB").className = classes[1];
  document.getElementById("blockC").className = classes[2];
}

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
}
.topleft {
  position: absolute;
  top: 8px;
  left: 16px;
}
.topright {
  position: absolute;
  top: 8px;
  right: 16px;
}
#blockA {
  background-color: lightblue;
  height: 100px;
  width: 100px;
}
#blockB {
  background-color: red;
  height: 100px;
  width: 100px;
}
#blockC {
  background-color: green;
  height: 100px;
  width: 100px;
}
.footer {
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  bottom: 0;
  height: 50px;
  width: 100%;
  background-color: #eee;
}
.holder {
  height: 20px;
  width: 100px;
  margin: -20px -50px;
  position: relative;
  top: 50%;
  left: 50%;
}

<div id="blockA" class="center">blockA</div>
<div id="blockB" class="topleft">blockB</div>
<div id="blockC" class="topright">blockC</div>

<div class="footer">
  <div class="holder">

    <button class="button" onclick="back()">Back</button>
    <button class="button" onclick="next()">Next</button>
  </div>
</div>

这个想法是：你有一个班级列表。按next时，将删除第一个类并将其插入列表的末尾。按下后，删除最后一个元素并将其插入开头。所以你只需旋转你的数组，然后应用你的类。如果您需要更多解释，请告诉我。

Answer 2

您可以创建一个全局变量，并将其初始化为零值。此变量将存储您指定的按钮的单击次数。在函数next()中，编写三个代码块，每个代码块都在if语句中。这些语句将检查全局变量的值，并执行所需的代码。如果变量的值是3的倍数，则执行单击3所需的代码，依此类推。

P.S。我可以为你编写代码，但由于你是一个新手，这对代码来说并不是很难，我希望你自己编写代码。

通过更改类来使用javascript更改div位置

单击1：

单击2：

点击3：

2 个答案: