如何使用 jQuery 获取所有数据 ID 输入 class 值，其中数据 ID 与当前关注的字段数据 ID 相同？

Question

我有输入表格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）class 其中每个组的数据 ID 相同。

使用 jquery 函数（在 change/paste/keyup 上）我需要获取 .featurecat-item、.featurecat-label、.featurecat-isactive class 输入值，其中数据- id 与当前关注的字段 data-id 相同。

以下是我的样本和不完整的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 执行此操作？

Answer 1

要获得 data 属性，请使用 .data('id') 或 .attr('data-id')
到具有此 data 属性的 select 元素使用 [data-id="...."] select 或
还要检查 :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">

如何使用 jQuery 获取所有数据 ID 输入 class 值，其中数据 ID 与当前关注的字段数据 ID 相同？

How to get all data-id input class value where the data-id is same as currently focused field data-id using jQuery?

html

javascript

jquery

function

onkeyup