Question

我正在使用for循环在屏幕上绘制多个充当按钮的元素。它们是从数据库中读取的，并根据数组条目是true还是false绘制为“ on”或“ off”，并且结果也被推送到一个新的空数组中。这部分一切正常。不过，一旦绘制了这些元素，我就会遇到麻烦。

目标是能够单击每个元素的开/关，并且在每次切换时，它还会更改数组中的相应布尔值。例如，数组[true, false, false, true]被循环通过，并且元素被绘制为绿色/真或红色/假。这将以绿色，红色，红色，绿色的顺序水平显示四个正方形。单击第一个框时，它变为红色（通过切换类），并且arr[0][0]处的条目变为false（行0，开关0）。

有没有一种方法可以检查单击哪个元素相对于其在数组中的位置，而无需使用大量的if语句？每个元素都有一个唯一的编号，并且每个元素中的每一行也具有唯一的名称。我曾考虑过为每个绘制的开关尝试.click(function(){if (arr[x][y]=true){arr[x][y]=false}else{...});，但这些方法似乎效率极低，尤其是当我要将这些扩展到许多行和开关时。我可能错过了令人眼花obvious乱的东西……

<!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>

Answer 1

您可以使用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

单击元素并在数组中的某些位置更改布尔值

1 个答案: