Получение значения поля ввода с помощью jquery

Question

У меня есть таблица с кнопкой редактирования, каждая таблица содержит кнопку редактирования с различным значением поля ввода, мне нужно получить различное значение поля ввода при нажатии разных кнопок редактирования. Мой код получает одно и то же значение снова и снова, не получая случайные значения. Вот мой код таблицы

<tr>
    <td>64</td>
    <td>2</td>
    <td>2₪</td>
    <input type="hidden" name="idd" value="64" id="main-id">
    <td>
        <span id="editBtn" class="editBtn 64" style="cursor: pointer; text-decoration: underline;">Edit</span>
    </td>
    <td>
    <span id="deleteBtn" class="deleteBtn" style="cursor: pointer; text-decoration: underline;">Delete</span>
    </td>
</tr>
<tr>
    <td>65</td>
    <td>25</td>
    <input type="hidden" name="idd" value="65" id="main-id">
    <td>
        <span id="editBtn" class="editBtn 65" style="cursor: pointer; text-decoration: underline;">Edit</span>
    </td>
    <td>
        <span id="deleteBtn" class="deleteBtn" style="cursor: pointer; text-decoration: underline;">Delete</span>
    </td>
</tr>

Внутри этой таблицы, когда я пытаюсь редактировать каждый раз, используя jquery, появляется первое значение скрытого поля, равное 64. Ниже приведено jQuery, которое я использовал для извлечения значения скрытого поля.

var bla = $('#main-id').val();
alert (bla);

Answer 1

$('#editBtn').on('click', function(e){
  console.log($('#main-id').val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>64</td>
    <td>2</td>
    <td>2₪</td>
    <input type="hidden" name="idd" value="64" id="main-id">
    <td>
      <span id="editBtn" class="editBtn 64" style="cursor: pointer; text-decoration: underline;">Edit</span>
    </td>
    <td>
      <span id="deleteBtn" class="deleteBtn" style="cursor: pointer; text-decoration: underline;">Delete</span>
    </td>
  </tr>
  <tr>
    <td>65</td>
    <td>25</td>
    <input type="hidden" name="idd" value="65" id="main-id">
    <td>
      <span id="editBtn" class="editBtn 65" style="cursor: pointer; text-decoration: underline;">Edit</span>
    </td>
    <td>
      <span id="deleteBtn" class="deleteBtn" style="cursor: pointer; text-decoration: underline;">Delete</span>
    </td>
  </tr>
</table>

Так в чем же проблема с этими логами c?

идентификаторы должны быть уникальными

Большая проблема здесь повторное использование тех же идентификаторов. Идентификаторы, по веб-стандартам, должны быть уникальными для каждой страницы. Это подробно описано в веб-стандартах и ​​подкреплено существующими методами, такими как getElementById. Обратите внимание, что метод - «getElement», а не «getElements».

Итак, как нам решить эту проблему? Каждый раз, когда вам нужно идентифицировать элементы, и эти элементы «логически» повторяются на странице, это потенциальный вариант использования класса. Классы могут повторить.

$('.editBtn').on('click', function(e) {
  console.log($('.main-id').val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      64
      <input type="hidden" name="idd" value="64" class="main-id">
    </td>
    <td>2</td>
    <td>2₪</td>
    <td>
      <span class="editBtn 64" style="cursor: pointer; text-decoration: underline;">Edit</span>
    </td>
    <td>
      <span class="deleteBtn" style="cursor: pointer; text-decoration: underline;">Delete</span>
    </td>
  </tr>
  <tr>
    <td>
      65
      <input type="hidden" name="idd" value="65" class="main-id">
    </td>
    <td>25</td>
    <td>
      <span class="editBtn 65" style="cursor: pointer; text-decoration: underline;">Edit</span>
    </td>
    <td>
      <span class="deleteBtn" style="cursor: pointer; text-decoration: underline;">Delete</span>
    </td>
  </tr>
</table>

Таким образом, этот второй фрагмент изменен для использования классов, но поведение остается прежним. Это почему? Это потому, что val() будет возвращать только первое значение из всех результатов селектора. Таким образом, хотя мы находим все элементы с классом main-id, он регистрирует только первый элемент. Как мы решаем эту проблему?

Контекстный поиск

Когда вы выполняете такую ​​операцию, как $('.main-id'), то, что на самом деле jQuery делает $(document).find('.main-id'). Он неявно использует document как context. Контекст - это элемент, с помощью которого дети будут искать внутри.

Итак, с учетом этого, что касается нашего вопроса, каков наш контекст? Наш контекст - это каждая строка. Таким образом, чтобы получить указанный нам c main-id, мы должны использовать контекстный поиск, чтобы найти его. Это будет выглядеть примерно так:

$('.editBtn').on('click', function(e) {
  console.log($(e.target).closest('tr').find('.main-id').val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      64
      <input type="hidden" name="idd" value="64" class="main-id">
    </td>
    <td>2</td>
    <td>2₪</td>
    <td>
      <span class="editBtn 64" style="cursor: pointer; text-decoration: underline;">Edit</span>
    </td>
    <td>
      <span class="deleteBtn" style="cursor: pointer; text-decoration: underline;">Delete</span>
    </td>
  </tr>
  <tr>
    <td>
      65
      <input type="hidden" name="idd" value="65" class="main-id">
    </td>
    <td>25</td>
    <td>
      <span class="editBtn 65" style="cursor: pointer; text-decoration: underline;">Edit</span>
    </td>
    <td>
      <span class="deleteBtn" style="cursor: pointer; text-decoration: underline;">Delete</span>
    </td>
  </tr>
</table>

Нажатие кнопок редактирования теперь регистрирует правильное значение. Как это работает? Итак, первое, что мы делаем, это оборачиваем e.target (элемент, по которому щелкнули) в объект jQuery, чтобы у нас был доступ к методам jQuery. Затем мы используем метод closest(), чтобы найти родительские элементы tr. Это tr является нашим контекстом . Оттуда мы выполняем поиск для .main-id, который найдет только основной идентификатор в нашей указанной строке c и boom. У вас есть элемент / значение, которое вы хотите.