更新

Question

大家好我已经创建了这个代码，但它不能以我希望它工作的方式工作我在这里添加了一些颜色，我希望它们在我点击下一个按钮之后逐个进入，下一个按钮正在正常工作但当我按下前一个按钮时它会添加+1然后再去-1希望你明白我想要的是什么问
谢谢它只是javascript，html和css

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
    <style type="text/css">

    #box{width: 500px; height: 400px; background: #CCC;}


    </style>

    </head>
    <body>
    <div id="box"></div>
    <input type="button" value="NEXT" onclick="changecolor()">
    <input type="button" value="PREVIOUS" onclick="prevcolor()">
    <script type="text/javascript">
        var boxcolor=["pink","blue","orange","magenta"];
        var i=0;

        function changecolor(){
            var div=document.getElementById('box');
            div.style.background=boxcolor[i];
            i++;
            if(i==boxcolor.length){
                i=0;
            }
        }
    function prevcolor(){

            var div=document.getElementById('box');
            div.style.background=boxcolor[i];
            i--;
        if(i==boxcolor.length){

                i--;
            }
    }





    </script>





    </body>
    </html>

Answer 1

首先设置颜色，然后递增/递减i：

        div.style.background=boxcolor[i];
        i--;

所以当你有这个序列时：

i = 0，颜色=灰色（尚未设置）
点击下一步
color = pink，我变成1
点击下一步
color = blue，i变为2
点击上一页
color = orange，i变为1

了解i如何始终设置为下一个颜色？因此，无论您点击什么按钮，下一个颜色都已由您之前的点击确定。

通过在调试器中单步执行代码，可以轻松捕获此类问题。

更新

下面是一个工作代码片段，通过从实际更改颜色中分割增量/减量来更容易理解。

var boxcolor=["pink","blue","orange","magenta"];
var i=0;
changecolor();

function changecolor(){
  var div=document.getElementById('box');
  div.style.background=boxcolor[i];
}
function nextcolor() {
  i++;
  if(i==boxcolor.length){
    i=0;
  }          
  changecolor();
}
function prevcolor(){
  i--;
  if(i==-1){
    i = boxcolor.length-1;
  }
  changecolor();
}

#box{width: 200px; height: 100px; background: #CCC;}

<div id="box"></div>
<input type="button" value="NEXT" onclick="nextcolor()">
<input type="button" value="PREVIOUS" onclick="prevcolor()">

Answer 2

可能的解决方案是：

<强> Javacsript ：

var boxcolor=["pink","blue","orange","magenta"];
var div=document.getElementById('box');
var len = boxcolor.length;
var i=0;

changeColor();

function changeColor(){
    div.style.background=boxcolor[i];
}

function nextcolor(){
    i = (i+1) % len;
    changeColor();
}

function prevcolor(){
    i = (len+(i-1)) % len;
    changeColor();
}

<强> HTML ：

<div id="box"></div>
    <input type="button" value="NEXT" onclick="nextcolor()">
    <input type="button" value="PREVIOUS" onclick="prevcolor()">

<强> CSS ：

#box{
   width: 500px; height: 400px;
}

点击此链接jsfiddle查看有效示例。希望它有用！

上一个按钮不起作用

2 个答案:

更新