Javascript 未检测到数组中值的更改

以下是我的js代码：

    // at first the three buttons have value 1
    var clicks = [1,1,1];

    // if (at least one button has value 2) {"button-next" = enabled}
    if (clicks.some(x => x == 1)) {
        document.getElementById("button-next").disabled = true;
    } else {
        document.getElementById("button-next").disabled = false;
    }

如果三个值中至少有一个为

2

，则必须启用

按钮next

---

使用jQuery，我成功地在第一次单击时将变量更改为

2

（不透明度更改为

1

），在第二次单击时将变量更改为

1

（不透明度更改为

0.5

）：

当我单击某个按钮时，值发生变化，但下一步的

按钮仍处于禁用状态。看起来没有检测到更改。我尝试手动更改它，如下所示：

var clicks = [1,2,1];

我证明了这些路线是可行的：

    if (clicks.some(x => x == 1)) {
        document.getElementById("button-next").disabled = true;
    } else {
        document.getElementById("button-next").disabled = false;
    }

因为在这一点上，
按钮next
被重新启用。我不知道怎么修理它。你有什么想法吗？
看起来你可以通过一些css和javascript一起完成这一切。除非您有其他特定于每个按钮的代码（不在示例中），否则您可以尝试以下操作：

var clicks = [1,2,1];


函数updateNextBtn（）{
如果（$（'.btn已单击'）。长度===0）{
$（“#按钮下一步”）.attr（'disabled'，'disabled'）；
}否则{
$（“#按钮下一步”）.removeAttr（'disabled'）；
}
};
$（文档）.ready（函数（）{
//按钮1
$（“.btn”）。单击（函数（）{
//添加或删除btn单击的类
$（this.toggleClass（'btn-clicked'）；
updateNextBtn（）；
});
});
.btn{
不透明度：0.5；
}
.btn.btn已单击{
不透明度：1.0；
}

地下一层
地下二层
地下三层
接下来
看起来您可以通过一些css和javascript一起完成这一切。除非您有其他特定于每个按钮的代码（不在示例中），否则您可以尝试以下操作：

var clicks = [1,2,1];


函数updateNextBtn（）{
如果（$（'.btn已单击'）。长度===0）{
$（“#按钮下一步”）.attr（'disabled'，'disabled'）；
}否则{
$（“#按钮下一步”）.removeAttr（'disabled'）；
}
};
$（文档）.ready（函数（）{
//按钮1
$（“.btn”）。单击（函数（）{
//添加或删除btn单击的类
$（this.toggleClass（'btn-clicked'）；
updateNextBtn（）；
});
});
.btn{
不透明度：0.5；
}
.btn.btn已单击{
不透明度：1.0；
}

地下一层
地下二层
地下三层
接下来
代码段中的条件实际上与您声明的条件不一致：

如果三个值中至少有一个为2，则必须启用“下一步”按钮

.some（）
不会返回
false
，直到谓词为每个元素返回
false

为了匹配您所述的条件，代码应比较
x==2
，并交换设置的
禁用值，因为条件现在已反转：

if (clicks.some(x => x == 2)) {
    document.getElementById("button-next").disabled = false;
} else {
    document.getElementById("button-next").disabled = true;
}


不过，更简单的更改可能是使用
.every（）
而不是
.some（）

当所有的
点击
都是
1
时，
按钮next
被禁用


简要介绍每一项：

[1, 1, 1].some(x => x == 1) // true (all are 1)
[1, 2, 1].some(x => x == 1) // true (1st and 3rd are 1, that's still some)
[2, 2, 2].some(x => x == 1) // false (none are 1)

[1, 1, 1].some(x => x == 2) // false (none are 2)
[1, 2, 1].some(x => x == 2) // true (2nd is 2)
[2, 2, 2].some(x => x == 2) // true (all are 2)

[1, 1, 1].every(x => x == 1) // true (all are 1)
[1, 2, 1].every(x => x == 1) // false (2nd is not 1)
[2, 2, 2].every(x => x == 1) // false (none are 1)


旁注

由于
.some（）
和
已经提供了一个布尔值，因此可以通过删除
if..else
来缩短代码段

以下是上述每个代码段的等效代码：

document.getElementById("button-next").disabled = !clicks.some(x => x == 2);

代码段中的条件实际上与您声明的条件不一致：

如果三个值中至少有一个为2，则必须启用“下一步”按钮

.some（）
不会返回
false
，直到谓词为每个元素返回
false

为了匹配您所述的条件，代码应比较
x==2
，并交换设置的
禁用值，因为条件现在已反转：

if (clicks.some(x => x == 2)) {
    document.getElementById("button-next").disabled = false;
} else {
    document.getElementById("button-next").disabled = true;
}


不过，更简单的更改可能是使用
.every（）
而不是
.some（）

当所有的
点击
都是
1
时，
按钮next
被禁用


简要介绍每一项：

[1, 1, 1].some(x => x == 1) // true (all are 1)
[1, 2, 1].some(x => x == 1) // true (1st and 3rd are 1, that's still some)
[2, 2, 2].some(x => x == 1) // false (none are 1)

[1, 1, 1].some(x => x == 2) // false (none are 2)
[1, 2, 1].some(x => x == 2) // true (2nd is 2)
[2, 2, 2].some(x => x == 2) // true (all are 2)

[1, 1, 1].every(x => x == 1) // true (all are 1)
[1, 2, 1].every(x => x == 1) // false (2nd is not 1)
[2, 2, 2].every(x => x == 1) // false (none are 1)


旁注

由于
.some（）
和
已经提供了一个布尔值，因此可以通过删除
if..else
来缩短代码段

以下是上述每个代码段的等效代码：

document.getElementById("button-next").disabled = !clicks.some(x => x == 2);

$（'.btn clicked'）.length==0是什么意思？第一部分是jquery选择器：$（.btn clicked'）。这将在文档中搜索具有“btn clicked”类的所有元素。单击按钮时（使用“toggleClass”）会将该类添加到按钮中（如果已经有该类，则会将其从按钮中删除）。选择器将返回类似于数组的内容，因此它将具有一个“length”属性，指示在“.btn clicked”类中找到了多少元素。通过这种方式，我们可以发现是否有任何按钮被点击。如果未单击任何项，$（'.btn clicked'）。长度===0将计算为true。
$（'.btn clicked'）。长度===0是什么意思？第一部分是jquery选择器：$（.btn clicked'）。这将在文档中搜索具有“btn clicked”类的所有元素。单击按钮时（使用“toggleClass”）会将该类添加到按钮中（如果已经有该类，则会将其从按钮中删除）。选择器将返回类似于数组的内容，因此它将具有一个“length”属性，指示在“.btn clicked”类中找到了多少元素。通过这种方式，我们可以发现是否有任何按钮被点击。如果未单击任何项，$（'.btn clicked'）.length==0将计算为true。