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。信息'。 JS就是我如何得到所有的價值觀。 我已嘗試使用.length的'.sudoku輸入[值=＃]'的多種方法，到目前為止都沒有。 你能幫我嗎？

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>

這樣，我可以通過分別查詢最接近的.tr或.td的data-row或data-column來輕松獲取編輯的行和列。

現在，當一些單元格被編輯時，我將僅在編輯發生的行/列中尋找重復項（而不是整個板）。

$('.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標志，從而錯誤信息將發布。