Question

HTML:
<div class="sudoku">
    <div class="tr tr-1">
        <div class="td col-1 block-1"><input type="number" min="1" max="9"></div>
        <div class="td col-2 block-1"><input type="number" min="1" max="9"></div>
        <div class="td col-3 block-1"><input type="number" min="1" max="9"></div>
        ...
        <div class="td col-9 block-3"><input type="number" min="1" max="9"></div>
    </div>
    <div class="tr tr-2">
        <div class="td col-1 block-1"><input type="number" min="1" max="9"></div>
        <div class="td col-2 block-1"><input type="number" min="1" max="9"></div>
        <div class="td col-3 block-1"><input type="number" min="1" max="9"></div>
        ...
        <div class="td col-9 block-3"><input type="number" min="1" max="9"></div>
    </div>
    <div class="tr tr-3">
        <div class="td col-1 block-1"><input type="number" min="1" max="9"></div>
        <div class="td col-2 block-1"><input type="number" min="1" max="9"></div>
        <div class="td col-3 block-1"><input type="number" min="1" max="9"></div>
        ...
        <div class="td col-9 block-3"><input type="number" min="1" max="9"></div>
    </div>
    <div class="tr tr-4">
    ...
    </div>
...
</div>

JS:
$('.sudoku input').change(function() {
    $('.sudoku input').each( function(index,value) {
        console.log('#' + index + ': ' + $(this).val() );
    });
});

我有一张9x9 = 81个输入字段（Sudoku）的表格。我想搜索/遍历所有这些并检查任何块，行或列中的两个（或更多）输入字段是否相同，然后使用.addClass（）标记重复项并向＆＃39附加错误消息; div.message＆＃39 ;. JS就是我如何得到所有的价值观。我已经尝试了多种方法，使用.length的.sudoku输入[value =＃]＆＃39;，到目前为止还没有。你可以帮帮我吗？

Answer 1

我将首先为我添加一些数据属性，以便轻松识别编辑发生的行和列：

<div class="sudoku">
    <div class="tr tr-1" data-row="1">
        <div class="td col-1 block-1" data-column="1">...</div>
        <div class="td col-2 block-1" data-column="2">...</div>
        <div class="td col-3 block-1" data-column="3">...</div>
        ...
        <div class="td col-9 block-3" data-column="9">...</div>
    </div>
...
</div>

通过这种方式，我可以通过分别查询最近data-row或data-column的{{1}}或.tr来轻松获取已修改的行和列。

现在，当某个单元格被编辑时，我将仅在编辑发生的行/列中查找重复项（而不是整个板）。

.td

Answer 2

我想这样的事情会这样做：

$('.sudoku input').change(function () {
    var values = {};
    var clean = true;
    $('.sudoku input').each(function (index, input) {
        if (values[input.value]) {
            input.classList.add('error');
            clean = false;
        } else values[input.value] = input;
    });
    if (!clean) $('div.message').html('Please... no duplicate values...');
});

这样它循环所有输入并将其值作为key添加到新对象中。如果该对象中已存在key，则它会将该类添加到副本并更改clean标志，以便发出错误消息。

jQuery：搜索多个相同的值

2 个答案: