0

I'm creating a JQuery dynamic selector (img for reference)

enter image description here

To change my letters shown, I'm using data-attributes to select which letter is active on each columns. I'm able to change my attributes correctly if I'm changing only one of my inputs, but when I try to change 2 of them (to activate one and deactivate the other), only one of them is actually modified. Here's the code I'm using:

 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");
}
Dave Fortin-Labrie
  • 11
  • 6
  • 1
    Since you changed the attribute of the first element to `true`, the second selector is matching that element and changing it back to `false`. – Barmar Mar 03 '21 at 17:06
  • Also, you shouldn't mix use of `.attr()` and `.data()`. See https://stackoverflow.com/questions/28335833/get-wrong-value-in-data-attribute-jquery/28335905#28335905 – Barmar Mar 03 '21 at 17:07
  • Oh wow, yeah that was it thanks man. – Dave Fortin-Labrie Mar 03 '21 at 17:11

1 Answers1

0

Like Barmar said in the comment, Since Ichanged the attribute of the first element to true, the second selector is matching that element and changing it back to false

Dave Fortin-Labrie
  • 11
  • 6