jQuery:搜索多个相同的值

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()标记重复的输入字段，并将错误消息附加到'div.message‘。JS是我获得所有值的方法。我尝试过使用.length of '.sudoku inputvalue=#‘的多种方法，到目前为止，这些方法都没有起作用。你能帮我吗？

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或.td的.tr或.td来轻松地获得已编辑的行和列。

现在，当一些单元格被编辑时，我将只在进行编辑的行/列中查找副本(而不是整个面板)。

$('.sudoku input').change(function() {

    var editedCell = $(this).closest('.td')[0];

    // get the row and col where the edit happened
    var row = $(this).closest('.tr').data('row'),
        col = $(this).closest('.td').data('column'),
        val = $(this).val();

    var hasDups = false;

    // check if any other cells in the same row has same value
    // note: can be made simpler with $(this).siblings().each(...)
    $('.sudoku .tr[data-row='+row+']').each(function() {
        if($(this).find('input').val() === val && this !== editedCell) {
            $(this).addClass('duplicate');
            hasDups = true;
        }
    });

    // check if any other cells in the same col has same value
    $('.sudoku .td[data-col='+col+']').each(function() {
        if($(this).find('input').val() === val && this !== editedCell) {
            $(this).addClass('duplicate');
            hasDups = true;
        }
    });
    if(hasDups) $(this).addClass('duplicate');
});

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标志，从而发出错误消息。