Выполнить функцию JavaScript в зависимости от местоположения на странице (ячейки)? - PullRequest
Новая
       10

Выполнить функцию JavaScript в зависимости от местоположения на странице (ячейки)?

0 голосов
/ 03 июля 2018

У меня есть страница, которая собирает, какие классы ученики собираются посещать, и отображает в таблице Course Title и Catalog Number. Если ученик выберет Course Title, он автоматически заполнит значение Catalog Number в следующей ячейке, и наоборот.

Единственная проблема, с которой я сталкиваюсь - когда вы заполняете одну Course Title, она заполняет каждую отдельную ячейку Catalog Number (и наоборот). 

<body>
  <table>
    <tbody>
      <tr>
        <td>
          <input list="courses" name="courseInput" placeholder="Course" oninput="UpdateCatNumbers()">
          <datalist id="courses" name="courseDatalist">
		<!--Filled in script-->					
	  </datalist>
        </td>
        <td>
          <input list="catalogs" name="catalogInput" placeholder="Catalog Number" id="catalogID" oninput="UpdateCourseNames()">
          <datalist id="catalogs" name="catalogDatalist">
		<!--Filled in script-->
	  </datalist>
        </td>
      </tr>
      <tr>
        <td><input list="courses" name="courseInput" placeholder="Course" oninput="UpdateCatNumbers()"></td>
        <td><input list="catalogs" name="catalogInput" placeholder="Catalog Number" id="catalogID" oninput="UpdateCourseNames()"></td>
      </tr>
      <tr>
        <td><input list="courses" name="courseInput" placeholder="Course" oninput="UpdateCatNumbers()"></td>
        <td><input list="catalogs" name="catalogInput" placeholder="Catalog Number" id="catalogID" oninput="UpdateCourseNames()"></td>
      </tr>
      <tr>
        <td><input list="courses" name="courseInput" placeholder="Course" oninput="UpdateCatNumbers()"></td>
        <td><input list="catalogs" name="catalogInput" placeholder="Catalog Number" id="catalogID" oninput="UpdateCourseNames()"></td>
      </tr>
    </tbody>
  </table>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="testTemplateJS.js"></script>
  <script>
    //Course Names
    var courseNames = ["Class A", "Class B", "Class C", "Class D", "Class E"];
    var list = $('#courses')[0];

    courseNames.forEach(function(item) {
      var option = document.createElement('option');
      option.value = item;
      list.appendChild(option);
    });
  </script>
  <script>
    //Catalog Numbers
    var catNumbers = ["Catalog 1", "Catalog 2", "Catalog 3", "Catalog 4", "Catalog 5"];
    var list = $('#catalogs')[0];

    catNumbers.forEach(function(item) {
      var option = document.createElement('option');
      option.value = item;
      list.appendChild(option);
    });
  </script>
  <script>
    function UpdateCatNumbers() {
      //on change of courseInput, run...
      $("input[name=courseInput]").change(function() {
        //declare a as the array index # of courseNames
        var a = courseNames.indexOf($(this).val());
        //change catalog input to display the same array index of catNumbers
        $("input[name=catalogInput]").val(catNumbers[a]);
      });
    }
  </script>
  <script>
    function UpdateCourseNames() {
      $("input[name=catalogInput]").change(function() {
        var b = catNumbers.indexOf($(this).val());
        $("input[name=courseInput]").val(courseNames[b]);
      });
    }
  </script>
</body>

Как получить, чтобы функции UpdateCatNumbers() и UpdateCourseNames() заполняли ячейку только рядом с ними?

1 Ответ

0 голосов
/ 03 июля 2018

Так что вам нужно применить значение только к одному другому входу. В этом случае вы можете использовать jQuery eq(index) - с его помощью вы можете выбрать один элемент из коллекции jQuery на основе индекса: 

$("input[name=courseInput]").each(function(index) {
    $(this).change(function() {
        var a = courseNames.indexOf($(this).val());

        $("input[name=catalogInput]").eq(index).val(catNumbers[a]);
    )};
});
...