无法访问局部变量

Question

>Function：

有一张水果(苹果，香蕉)和它们的颜色(红色，黄色)的桌子。

要求：

找到一个水果，输出它的颜色。如果不存在水果，则"没有发现水果"。

问题：

第一个结果是正确的("梨">

不在表中)，但随后的结果是错误的("梨是红色的？")。

我尝试使用var color或let color而不是全局在本地声明color变量，但没有奏效。我认为我使用的范围或测试条件是错误的。

¯\_(ツ)_/¯

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>