Question

我有这两个javascript函数，出于某种原因我必须单击两次按钮才能使用它们。任何想法？

var shirts = new Array("shirtpink.png","shirtred.png", "shirtblue.png", "shirtyellow.png","shirt.png");

var index = 0;
function changecolor(){
    if (index > 4){
        index = 0;
    }
    var shirtpick = document.getElementById("shirt");
    shirtpick.setAttribute('src',shirts[index]);
    index++;
}

其他功能：

function changecolorback(){
    index--;
    i++;
    if (index < 0){
        index = 4;
    }
    var shirtback = document.getElementById("shirt");
    shirtback.setAttribute('src',shirts[index]);
}

Answer 1

var shirts = ["shirtpink.png","shirtred.png", "shirtblue.png", "shirtyellow.png","shirt.png"],
    index = 0;

function changecolor(amount){
   index = (index + amount) % shirts.length;
   document.getElementById("shirt").setAttribute('src',shirts[index]);
}

原因是你的增量：你的代码执行后你正在递增（在一个函数中，但在另一个函数中没有，所以你的changecolorback()应该表现良好。）

您还有i++看起来多余，有些变量只使用过一次。

我缩短了你的代码（大幅度），所以你可以在没有太多滚动的情况下获得这些评论。您现在可以只执行changecolorback()而不是调用changecolor(-1)，而转发方法是changecolor(1)。

另一个优点是，这将允许您跳过多个或随机数量，这可能（或可能不）有用。

修改

JS像Java一样实现模数，所以底片仍然存在。即(-1)%5 === -1

你可以通过改变（更优雅但不完全等同）来轻松克服这个问题：

index = Math.abs(index + amount) % shirts.length;

或

index = ((index + amount) % shirts.length + shirts.length ) % shirts.length;

Answer 2

尝试在两个函数的开头递增/递减索引。此外，您有5个元素，而不是阵列中的4个元素。您应该使用shirts.length来避免这种情况。

javascript函数需要doubleclick才能工作

2 个答案: