JQuery 无法连续更改 2 个数据属性

Question

我正在创建 JQuery 动态 select 或（img 供参考）

要更改我显示的字母，我使用数据属性 select 每个列上哪个字母处于活动状态。如果我只更改我的一个输入，我可以正确更改我的属性，但是当我尝试更改其中的 2 个（激活一个并停用另一个）时，实际上只有一个被修改。这是我正在使用的代码：

 function nextOrangeInput(inputNumber, direction) {
    var activeInput = $('.input-orange[data-orange-input="' + inputNumber + '"][data-orange-active="true"]');
    
    var position = activeInput.data("orange-position");
    if (direction === "up") {
        if (activeInput.data("orange-first") === "true") {
            $('.input-orange[data-orange-input="' + inputNumber + '"][data-orange-last="true"]').attr('data-orange-active', "true");
        } else {
            position = position - 1;
            $('.input-orange[data-orange-input="' + inputNumber + '"][data-orange-position="' + position + '"]').attr('data-orange-active', "true");
        }
    } else if (direction === "down") {
        if (activeInput.data("orange-last") === "true") {
            $('.input-orange[data-orange-input="' + inputNumber + '"][data-orange-first="true"]').attr('data-orange-active', "true");
        } else {
            position = position + 1;
            $('.input-orange[data-orange-input="' + inputNumber + '"][data-orange-position="' + position + '"]').attr('data-orange-active', "true");
        }
    }
    $('.input-orange[data-orange-input="' + inputNumber + '"][data-orange-active="true"]').attr('data-orange-active', "false");
}

Answer 1

正如 Barmar 在评论中所说，由于我将第一个元素的属性更改为 true，第二个选择器正在匹配该元素并将其更改回 false

JQuery 无法连续更改 2 个数据属性

JQuery unable to change 2 data attribute in a row

html

jquery

attributes