Question

这是我的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，则必须启用button-next。

使用jQuery，我设法在第一次点击时将变量更改为2（并将不透明度更改为1），然后在第二次点击时将变量更改为1（并将不透明度更改为0.5）：

$(document).ready(function(){
    // BUTTON 1
    $("#button1").click(function(){
        if (clicks[0] == 1) {
            jQuery("#button1").css('opacity', '1');
            clicks[0] = 2;
        } else {
            jQuery("#button1").css('opacity', '0.5');
            clicks[0] = 1;
        }
    });

    // BUTTON 2
    $("#button2").click(function(){
        if (clicks[1] == 1) {
            jQuery("#button2").css('opacity', '1');
            clicks[1] = 2;
        } else {
            jQuery("#button2").css('opacity', '0.5');
            clicks[1] = 1;
        }
    });

    // BUTTON 3
    $("#button3").click(function(){
        if (clicks[2] == 1) {
            jQuery("#button3").css('opacity', '1');
            clicks[2] = 2;
        } else {
            jQuery("#button3").css('opacity', '0.5');
            clicks[2] = 1;
        }
    });
});

当值更改后单击按钮，但button-next仍然处于禁用状态。看起来没有检测到更改。我试图像这样手动更改它：

var clicks = [1,2,1];

我证明这些线条有效：

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

因为此时button-next已启用。我不知道如何解决它。你有什么想法吗？

Answer 1

看起来你可以用一些css和javascript一起完成这一切。除非您有其他特定于每个按钮的代码（不在您的示例中），否则您可以尝试这样的事情：

function updateNextBtn() {
    if ($('.btn-clicked').length === 0) {
        $('#button-next').attr('disabled', 'disabled');
    } else {
        $('#button-next').removeAttr('disabled');
    }
};

$(document).ready(function(){
    // BUTTON 1
    $(".btn").click(function() {
        // Add or remove btn-clicked class
        $(this).toggleClass('btn-clicked');
        updateNextBtn();
    });
});

.btn {
  opacity: 0.5;
}

.btn.btn-clicked {
  opacity: 1.0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button1" class="btn">B1</button>
<button id="button2" class="btn">B2</button>
<button id="button3" class="btn">B3</button>
<button id="button-next" disabled="disabled">Next</button>

Answer 2

摘录中的条件并不符合您所说的条件：

如果三个值中至少有一个为2，则必须启用button-next。

.some()不会返回false，直到谓词为每个元素返回false。

为了符合您声明的条件，代码应该比较x == 2并交换设置的disabled值，因为条件现在已经反转：

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

但是，更简单的更改可能是使用.every()而不是.some()。

虽然所有clicks都是1，但button-next已被停用。

if (clicks.every(x => x == 1)) {
// the rest as-is

简要介绍一下：

[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)

旁注

自if..else .some()移除.every()后，可以缩短代码段，document.getElementById("button-next").disabled = !clicks.some(x => x == 2);已提供布尔值。

以下是每个代码段的等效内容：

document.getElementById("button-next").disabled = clicks.every(x => x == 1);

cv2.cp36-win_amd64.pyd

未检测到数组中值的更改

2 个答案: