Невозможно получить доступ к локальной переменной

Question

Функция :

Есть таблица фруктов (яблоко, банан) и их цвета (красный, желтый).

Требование :

Найти фрукт, вывести его цвет. Если плодов нет, «плодов не найдено».

Задача :

Первый результат верный («груша» отсутствует в таблице), но последующие - неправильные («груша красная?»).

Я попытался объявить переменную color локально, используя var color или let color вместо global, и это не сработало. Я думаю, что объем или условия тестирования, которые я использую, неверны.

¯ \ _ (ツ) _ / ¯

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 N goc определенно удовлетворяет базовому вопросу «почему этот код не работает?», Но рассматривали ли вы более простое решение для начала? В этом масштабе просто l oop каждой строки и сравните значение первого столбца с желаемым 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>