Нажмите элементы и измените логическое значение в определенных позициях в массиве - PullRequest
Новая
       13

Нажмите элементы и измените логическое значение в определенных позициях в массиве

0 голосов
/ 29 ноября 2018

Я использую цикл for, чтобы нарисовать на экране несколько элементов, которые действуют как кнопки.Они считываются из базы данных и отображаются как «включено» или «выключено», в зависимости от того, является ли запись массива true или false, и результаты также помещаются в новый пустой массив.Эта часть все работает хорошо.У меня возникли проблемы с отслеживанием этих элементов после их прорисовки.

Цель состоит в том, чтобы иметь возможность включать / выключать каждый элемент, и при каждом переключении он также изменяет соответствующий логический параметр в массиве.Например, массив [true, false, false, true] проходит по петле, и элементы отображаются зеленым / true или красным / false.Это покажет четыре квадрата по горизонтали, в порядке зеленого, красного, красного, зеленого.При щелчке по первому блоку он становится красным (при переключении класса), а запись в arr[0][0] меняется на false (строка ноль, переключатель 0).

Есть ли способ проверить, какой элемент был нажат по отношению к его позиции в массиве, без использования большого количества операторов if?Каждый элемент имеет уникальный номер, и каждому ряду элементов также присваивается уникальное имя.Я думал о том, чтобы попробовать .click(function(){if (arr[x][y]=true){arr[x][y]=false}else{...}); для каждого нарисованного переключателя, но это кажется ужасно неэффективным способом сделать это - особенно если я хочу расширить их до множества строк и переключателей.Я, наверное, упускаю что-то ослепительно очевидное ... 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        body {
        text-align: center;
    }
    .page-container {
        margin: 0 auto;
        max-width: 700px;
        height: 700px;
        background-color: #FFFC88;
    }
    .row {
        width: 100%;
        height: 100px;
        background-color: #FFEECC;
        display: flex;
        justify-content: space-around;
        align-items: center;
        border: 1px solid black;
    }
    .switch {
        height: 60px;
        width: 60px;
        border: 1px solid black;
        float: left;
    }
    .active-switch {    
        background-color: #42f480;  
    }
    .unactive-switch {
        background-color: #f44141;  
    }
    </style>
</head>
<body>
    <div class="page-container">
        <div class="main-container"></div>   
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <script>        
        var store = [{"pattern": [true, false, false, true]}, //pseudodata from database
                     {"pattern": [false, true, false, false]}]; 
        var temp = []; //temp boolean data to be altered in real time
        for (var i = 0; i < 2; i++){
            var $newRow = $('<div class="row" id="row' + i + '">');
            $('.page-container').append($newRow);
                for (var j = 0; j < 4; j++){
                var $switchOn = $('<div id="switch' + j + '" class="switch active-switch">');
                var $switchOff = $('<div id="switch' + j + '" class="switch unactive-switch">');
                temp[i] = temp[i] || [];
                    if (store[i].pattern[j] === true){
                        $('#row' + [i]).append($switchOn);
                        temp[i].push(true);
                    } else {
                        $('#row' + [i]).append($switchOff);
                        temp[i].push(false);
                    }
                }
        };
        $(".switch").click(function() {
          $(this).toggleClass("active-switch unactive-switch");
          //something here to alter the boolean at temp[x][y]
          console.log(temp[0]); //print altered array in console
        });
    </script>
</body>
</html>

1 Ответ

0 голосов
/ 29 ноября 2018

Вы можете использовать Jquery .index () , чтобы найти индекс элемента в строке.

Аналогично, вы можете найти индекс строки, используя $(this).parent().index().

Например: 

x=$(this).parent().index()-1; // -1 for adjustment
y=$(this).index();
temp[x][y] = !temp[x][y];
console.log(temp[x]); //print altered array in console
...