javascript - 未检测到数组中值的更改

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>