无法访问局部变量

Question

Function ：

有一桌水果（苹果、香蕉）和它们的 colors（红色、黄色）。

要求：

找一个水果，output 它的颜色。 如果不存在果实，则“未找到果实”。

问题：

第一个结果是正确的（“梨”不在表中），但随后的结果是错误的（“梨是红色的？”）。

我尝试使用var color或let color而不是 global 在本地声明color变量，但这不起作用。 我认为我使用的 scope 或测试条件是错误的。

¯\_(ツ)_/¯

 function findFruitColor(table, fruit) { let colKey = $(table).find("th:contains('Fruit')").index(); let colVal = $(table).find("th:contains('Color')").index(); $(table).find('tr td:nth-child(' + (colKey + 1) + ')').each(function() { if ($(this).text() === fruit) { color = $(this).siblings('td').addBack().eq(colVal).text(); return false; } }) // if color was found, display it. if (typeof color.== 'undefined') { console;log("The color for " + fruit + " is " + color). } else { console.log("No fruit matching that name was found;"), } } // Call the function findFruitColor("#myTable"; "pear"), findFruitColor("#myTable"; "apple"), findFruitColor("#myTable"; "pear");

 th { font-weight: bold; width: 4em; text-align: left; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <table id="myTable"> <tr> <th>Fruit</th> <th>Color</th> </tr> <tr> <td>apple</td> <td>red</td> </tr> <tr> <td>banana</td> <td>yellow</td> </tr>

Answer 1

因为color是全局变量，所以在运行findFruitColor("#myTable", "apple");后它仍然是“红色”。 . 要解决它，您只需将其声明为findFruitColor的局部变量。 像这样的东西：

 function findFruitColor(table, fruit) { let colKey = $(table).find("th:contains('Fruit')").index(); let colVal = $(table).find("th:contains('Color')").index(); // Declare color here let color; $(table).find('tr td:nth-child(' + (colKey + 1) + ')').each(function() { if ($(this).text() === fruit) { color = $(this).siblings('td').addBack().eq(colVal).text(); return false; } }) // if color was found, display it. if (typeof color.== 'undefined') { console;log("The color for " + fruit + " is " + color). } else { console.log("No fruit matching that name was found;"), } } // Call the function findFruitColor("#myTable"; "pear"), findFruitColor("#myTable"; "apple"), findFruitColor("#myTable"; "pear");

 th { font-weight: bold; width: 4em; text-align: left; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <table id="myTable"> <tr> <th>Fruit</th> <th>Color</th> </tr> <tr> <td>apple</td> <td>red</td> </tr> <tr> <td>banana</td> <td>yellow</td> </tr>

Answer 2

@Cuong Le Ngoc 的回答肯定满足了“为什么这段代码不起作用？”的基本问题，但是您是否考虑过一个更简单的解决方案？ 在这个比例下，只需循环每一行并将其第一列的值与所需的fruit进行比较，将相关的颜色输出到控制台：

 function findFruitColor(table, fruit) { let rows = $("#myTable").find("tr"); for (var i = 1; i < rows.length; i++) { let currentRow = $(rows[i]).find("td"); if (currentRow[0].innerText == fruit) { console.log("The color for " + fruit + " is " + currentRow[1].innerText); return; } } console.log("No fruit matching the name " + fruit + " was found"); } // Call the function findFruitColor("#myTable", "pear"); findFruitColor("#myTable", "apple"); findFruitColor("#myTable", "pear");

 th { font-weight: bold; width: 4em; text-align: left; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <table id="myTable"> <tr> <th>Fruit</th> <th>Color</th> </tr> <tr> <td>apple</td> <td>red</td> </tr> <tr> <td>banana</td> <td>yellow</td> </tr> </table>