如何使用jQuery获取数据ID与当前关注的字段数据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?如何使用jQuery获取数据ID与当前关注的字段数据ID相同的所有数据ID输入类值？
【发布时间】：2019-09-29 07:29:13
【问题描述】：

我在下面输入表单 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）类，其中每个组的 data-id 相同。

使用 jquery 函数（更改/粘贴/keyup）我需要获取 .featurecat-item、.featurecat-label、.featurecat-isactive 类输入值，其中 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 中使用？

【问题讨论】：

标签： javascript jquery html function onkeyup

【解决方案1】：

要获取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">

【讨论】：