Question

对于令人困惑的标题感到抱歉，我真的想不出更好的事情。

假设我的客户在他们的主页上有一个方形空间，他们可以上传图像，这些图像可以放在网格中任意数量的框上。

图像应该占用的框的选择看起来像这样：

<div class="row">
    <div class="grid-position">
        <input type="checkbox" name="position[1]" disabled>
    </div>
    <div class="grid-position">
        <input type="checkbox" name="position[2]" disabled>
    </div>
    <div class="grid-position">
        <input type="checkbox" name="position[3]">
    </div>
    <div class="grid-position">
        <input type="checkbox" name="position[4]">
    </div>
</div>
<div class="row">
    <div class="grid-position">
        <input type="checkbox" name="position[5]">
    </div>
    <div class="grid-position">
        <input type="checkbox" name="position[6]">
    </div>
    <div class="grid-position">
        <input type="checkbox" name="position[7]">
    </div>
    <div class="grid-position">
        <input type="checkbox" name="position[8]">
    </div>
</div>

https://jsfiddle.net/17zt26wb/4/

然而，由于图像只能是矩形，我想阻止他们选择这样的东西：

X - X - O - O

X - O - O - O

var selection = {p1: true, p2: true, p3: false, p4: false, p5: true, p6: false, p7: false, p8: false};

OR：

O - O - X - X

X - O - O - O

var selection = {p1: false, p2: false, p3: true, p4: true, p5: true, p6: false, p7: false, p8: false};

但是，这是有效的：

X - O - O - O

O - O - O - O

var selection = {p1: true, p2: false, p3: false, p4: false, p5: false, p6: false, p7: false, p8: false};

OR：

O - X - X - X

var selection = {p1: false, p2: true, p3: true, p4: true, p5: false, p6: true, p7: true, p8: true};

等

如果选中的复选框表示正方形/矩形，我需要帮助找出并返回true / false的算法。这可以在Javascript中完成，但它并不重要 - 我只需要一些东西开始，我会自己将它移植到我的语言。

在小提琴中，前两个复选框被禁用，因为图像已经占据了这两个块。选择对象中p1和p2的值始终为false。

这甚至可能吗？我可能只是不关心验证，但它会很好。

编辑：为了澄清，网格大小应始终保持为4x2，但是，选择使用常量更改大小会更好。

Answer 1

给定一个包含有效＆＃34;索引的数组数组＆＃34; - 作为一个例子（不完整）

// box 5 and 6 alone are valid. 
// 5 & 6 in combination is valid. 
// 3,4,7,8 in combination is valid
// TODO: Add all other valid combinations
var validCombinations = [[5],[6],[5,6],[3,4,7,8]];

您可以使用如下算法。请注意，这是＆＃34;硬编码＆＃34;有效组合而不是使用真实算法来确定选择是否为矩形。

＆＃13;

var validCombinations = [[5],[6],[5,6],[3,4,7,8]];

function isAll(input){
    var $checkedBoxes = $(':checkbox:checked');
    return $checkedBoxes.length == input.length 
             && input.every(function(i){          
                    return $("[name='position[" + i + "]']:checkbox:checked").length;
                })
}

$(':checkbox').click(function(){
   var isValid = validCombinations.some(function(x) { return isAll(x);})
   console.log("Selection is valid?",isValid)
})

＆＃13;

.row {
	margin-bottom: 4px;
}

.row .grid-position {
	display: inline-block;
	background-color: #aaa;
	padding: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <div class="grid-position">
        <input type="checkbox" name="position[1]" disabled>
    </div>
    <div class="grid-position">
        <input type="checkbox" name="position[2]" disabled>
    </div>
    <div class="grid-position">
        <input type="checkbox" name="position[3]">
    </div>
    <div class="grid-position">
        <input type="checkbox" name="position[4]">
    </div>
</div>
<div class="row">
    <div class="grid-position">
        <input type="checkbox" name="position[5]">
    </div>
    <div class="grid-position">
        <input type="checkbox" name="position[6]">
    </div>
    <div class="grid-position">
        <input type="checkbox" name="position[7]">
    </div>
    <div class="grid-position">
        <input type="checkbox" name="position[8]">
    </div>
</div>

＆＃13;

仅允许使用复选框栅格选择矩形

1 个答案: