Как получить все значения входного класса data-id, где data-id совпадает с текущим фокусированным идентификатором поля field, используя jQuery? - PullRequest
Новая
       26

Как получить все значения входного класса data-id, где data-id совпадает с текущим фокусированным идентификатором поля field, используя jQuery?

0 голосов
/ 29 сентября 2019

У меня есть форма ввода html ниже, 

<input type="text" class="form-control featurecat-item featurecat" value="" data-id="1">
<input type="text" class="form-control featurecat-label featurecat" value="" data-id="1">
<input type="checkbox" class="filled-in featurecat-isactive featurecat" data-id="1">

<input type="text" class="form-control featurecat-item featurecat" value="" data-id="2">
<input type="text" class="form-control featurecat-label featurecat" value="" data-id="2">
<input type="checkbox" class="filled-in featurecat-isactive featurecat" data-id="2">

<input type="text" class="form-control featurecat-item featurecat" value="" data-id="3">
<input type="text" class="form-control featurecat-label featurecat" value="" data-id="3">
<input type="checkbox" class="filled-in featurecat-isactive featurecat" data-id="3">

<input type="text" class="form-control featurecat-item featurecat" value="" data-id="4">
<input type="text" class="form-control featurecat-label featurecat" value="" data-id="4">
<input type="checkbox" class="filled-in featurecat-isactive featurecat" data-id="4">

Здесь каждая группа содержит три поля (.featurecat-item, .featurecat-label, .featurecat-isactive) класс, где каждый идентификатор группы данных равенто же самое.

С помощью функции jquery (при изменении / вставке / вводе ключа) мне нужно получить входное значение класса .featurecat-item, .featurecat-label, .featurecat-isactive, данные-идентификаторы которого совпадают св настоящее время сфокусированный идентификатор поля данных.

Ниже приведен пример и неполная функция jquery, 

  $(document).ready(function(){

    $(".featurecat").on("change paste keyup", function() {

    //.........
    // var current_id = Current focused field data-id
    // Get the .featurecat-item, .featurecat-label, .featurecat-isactive class input value which data-id is equal to current_id
    //......... 

     var item = $('.featurecat-item').val().replace(/,/g, "");
     var label = $('.featurecat-label').val().replace(/,/g, "");        
     var isactive = ($(".featurecat-isactive").prop('checked') == true) ? 1 : 0;

     var data = "item:"+item+"| label:"+label+"| isactive:"+isactive;
     console.log(data);
    });

  });

Как это можно сделать с помощью jQuery?

1 Ответ

1 голос
/ 29 сентября 2019
  • Чтобы получить атрибут data, используйте .data('id') или .attr('data-id')
  • Чтобы выбрать элемент с этим атрибутом data, используйте [data-id="...."] селектор
  • Также для проверки:checked вы можете использовать .is(':checked')

$(document).ready(function(){

    $(".featurecat").on("change paste keyup", function() {

    //.........
    // var current_id = Current focused field data-id
    // Get the .featurecat-item, .featurecat-label, .featurecat-isactive class input value which data-id is equal to current_id
    //......... 
     var ThisInput = $(this);
     var data_id = ThisInput.data('id');
     var item = $('.featurecat-item[data-id="'+data_id +'"]').val();//.replace(/,/g, "");
     var label = $('.featurecat-label[data-id="'+data_id +'"]').val();//.replace(/,/g, "");        
     var isactive = ($('.featurecat-isactive[data-id="'+data_id+'"]').is(':checked')) ? 1 : 0;

     var data = "item:"+item+"| label:"+label+"| isactive:"+isactive;
     console.log(data);
    });

  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control featurecat-item featurecat" value="" data-id="1">
<input type="text" class="form-control featurecat-label featurecat" value="" data-id="1">
<input type="checkbox" class="filled-in featurecat-isactive featurecat" data-id="1">

<input type="text" class="form-control featurecat-item featurecat" value="" data-id="2">
<input type="text" class="form-control featurecat-label featurecat" value="" data-id="2">
<input type="checkbox" class="filled-in featurecat-isactive featurecat" data-id="2">

<input type="text" class="form-control featurecat-item featurecat" value="" data-id="3">
<input type="text" class="form-control featurecat-label featurecat" value="" data-id="3">
<input type="checkbox" class="filled-in featurecat-isactive featurecat" data-id="3">

<input type="text" class="form-control featurecat-item featurecat" value="" data-id="4">
<input type="text" class="form-control featurecat-label featurecat" value="" data-id="4">
<input type="checkbox" class="filled-in featurecat-isactive featurecat" data-id="4">
...