Блог

Главная - Вопросы по программированию - Как запустить, взяв родительский класс div вместо ввода

Как запустить, взяв родительский класс div вместо ввода

#jquery

#jquery ( jquery )

Вопрос:

Это моя форма и мой скрипт, в котором данные запускаются из входного имени. Я хочу запустить эту функцию, где класс div имеет kg вместо имени ввода

Как я должен это сделать?

 $(document).on('change paste keyup', "input[name='kg[]']", function() {
  updatedynamicprice($(this));
});

function updatedynamicprice(selector) {
  let kg = $("input[name='kg[]']").val();
  let total_price = 100 * kg;
  $("input[name='price[]']").val(total_price);
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="kg">
  <input type="number" name="kg[]" id="input-kg" class="form-control">
</div>
<div class="form-controller">
  <input type="number" name="price[]" id="input-kg" class="form-control">
</div>

Комментарии:

1. Я сделал вам фрагмент. Пожалуйста, добавьте соответствующий скрипт и HTML. Например updatedynamicprice , отсутствует

2. У A div нет событий ‘change’, ‘paste’ или ‘keyup’. Если вы не используете contentEditable . например: jsfiddle.net/n4cL1ybk

3. @Turnip хорошо, тогда мы можем использовать события для имени типа ввода только для тех, родительский класс которых имеет div class =»kg»

4. $(document).on('change paste keyup', ".kg input", function() { updatedynamicprice($(this)); });

5. Почему бы не сделать это на уровне формы?

Ответ №1:

Навигация с помощью ближайшего и контейнера

Дайте классы, которые вы можете использовать повторно

 $(document).on('change paste keyup', function(e) {
  const $parent = $(e.target).closest(".container");
  let qty = $(".qty",$parent).val();
  let total_price = 100 * qty;
  $(".price",$parent).val(total_price);
}) 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="kg">
    <input type="number" name="kg[]" class="qty" class="form-control">
  </div>
  <div class="form-controller">
    <input type="number" name="price[]" class="price" class="form-control">
  </div>
</div>
<hr/>
<div class="container">
  <div class="pounds">
    <input type="number" name="pounds[]" class="qty" class="form-control">
  </div>
  <div class="form-controller">
    <input type="number" name="price[]" class="price" class="form-control">
  </div>
</div>