Question

我的JSON看起来像这样：

{
    "solution": {
        "1": {
            "cell-1": "1",
            "cell-2": "2",
            "cell-3": "3",
            "cell-4": "4",
            "cell-5": "5",
            "cell-6": "6",
            "cell-7": "7",
            "cell-8": "8",
            "cell-9": "9"
        },
        "2": {
            "cell-1": "1",
            "cell-2": "2",
            "cell-3": "3",
            "cell-4": "4",
            "cell-5": "5",
            "cell-6": "6",
            "cell-7": "7",
            "cell-8": "8",
            "cell-9": "9"
        },
        etc...
    }
}

我正在制作一个数独游戏，所以有9个部分，每个部分有9个单元格（包含一个数字）。必须使用上述JSON作为数据源自动填充拼图。我的JS循环遍历JSON文件并填写数字如下：

$.getJSON(validSolution, function(data) {
    $.each(data.solution, function(sectionName, cells) {
        var currentSection = $('[data-section=' + sectionName + ']');
        console.log(currentSection);
        $.each(cells, function(cellName, cellNumber) {
            console.warn(cellNumber);
            currentSection.find('[data-number]').text(cellNumber);
        });
    });
});

HTML看起来像这样（一个部分作为示例，其中有9个）：

<div class="sudoku__body__section" data-section="1">
    <div class="sudoku__body__section__cell" data-cell="1">
        <span class="sudoku__body__section__cell__number" data-number></span>
    </div>
    <div class="sudoku__body__section__cell" data-cell="2">
        <span class="sudoku__body__section__cell__number" data-number></span>
    </div>
    <div class="sudoku__body__section__cell" data-cell="3">
        <span class="sudoku__body__section__cell__number" data-number></span>
    </div>
    <div class="sudoku__body__section__cell" data-cell="4">
        <span class="sudoku__body__section__cell__number" data-number></span>
    </div>
    <div class="sudoku__body__section__cell" data-cell="5">
        <span class="sudoku__body__section__cell__number" data-number></span>
    </div>
    <div class="sudoku__body__section__cell" data-cell="6">
        <span class="sudoku__body__section__cell__number" data-number></span>
    </div>
    <div class="sudoku__body__section__cell" data-cell="7">
        <span class="sudoku__body__section__cell__number" data-number></span>
    </div>
    <div class="sudoku__body__section__cell" data-cell="8">
        <span class="sudoku__body__section__cell__number" data-number></span>
    </div>
    <div class="sudoku__body__section__cell" data-cell="9">
        <span class="sudoku__body__section__cell__number" data-number></span>
    </div>                 
</div>

问题是这个代码用数字9填充每个单元格。对于当前的JSON文件，每个部分的输出应该是这样的：

-------------
| 1 | 2 | 3 |
-------------
| 4 | 5 | 6 |
-------------
| 7 | 8 | 9 |
-------------

然而，它看起来像这样：

-------------
| 9 | 9 | 9 |
-------------
| 9 | 9 | 9 |
-------------
| 9 | 9 | 9 |
-------------

这里有什么问题，我该如何解决？控制台不返回任何错误，所有日志都显示正确的值。循环非常顺利，我可以看到正确的部分，单元格和相应的值，但是当我使用jQuery text()或html()时，它只会将9放在任何地方。

Answer 1

以下是您必须使用的代码：

<div class="sudoku__body__section" data-section="1">
    <div class="sudoku__body__section__cell" data-cell="1">
        <span class="sudoku__body__section__cell__number" data-number="cell-1"></span>
    </div>
    <div class="sudoku__body__section__cell" data-cell="2">
        <span class="sudoku__body__section__cell__number" data-number="cell-2"></span>
    </div>
    <div class="sudoku__body__section__cell" data-cell="3">
        <span class="sudoku__body__section__cell__number" data-number="cell-3"></span>
    </div>
    <div class="sudoku__body__section__cell" data-cell="4">
        <span class="sudoku__body__section__cell__number" data-number="cell-4"></span>
    </div>
    <div class="sudoku__body__section__cell" data-cell="5">
        <span class="sudoku__body__section__cell__number" data-number="cell-5"></span>
    </div>
    <div class="sudoku__body__section__cell" data-cell="6">
        <span class="sudoku__body__section__cell__number" data-number="cell-6"></span>
    </div>
    <div class="sudoku__body__section__cell" data-cell="7">
        <span class="sudoku__body__section__cell__number" data-number="cell-7"></span>
    </div>
    <div class="sudoku__body__section__cell" data-cell="8">
        <span class="sudoku__body__section__cell__number" data-number="cell-8"></span>
    </div>
    <div class="sudoku__body__section__cell" data-cell="9">
        <span class="sudoku__body__section__cell__number" data-number="cell-9"></span>
    </div>                 
</div>



$.getJSON(validSolution, function(data) {
    $.each(data.solution, function(sectionName, cells) {
        var currentSection = $('[data-section=' + sectionName + ']');
        console.log(currentSection);
        $.each(cells, function(cellName, cellNumber) {
            console.warn(cellNumber);
            currentSection.find('[data-number="' + cellName +'"]').text(cellNumber);
        });
    });
});

Answer 2

我认为你的问题在于这一行

currentSection.find('[data-number]').text(cellNumber);

如果您的查找选择了所有单元格，则每次迭代都会替换其中的所有文本。

也许你可以引入一个索引变量，如：

var i =0;

... 然后在第二个循环中做

currentSection.find('[data-number]')[i].innerText = cellNumber;
i++;

我知道有一种方法可以从你的每个循环获取索引，但是不记得如何在你的上下文中执行它。这样会更好，因为您不必引入新变量。

不引入变量的另一种方法是只更改一行：

 currentSection.find('[data-number]')[cellName.replace("cell-", "") - 1].innerText = cellNumber;

使用jQuery迭代JSON与text（）

2 个答案: