javascript - 如何使用 jQuery 获取所有 data-id 输入类值，其中 data-id 与当前焦点字段 data-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)类，其中每个组的 data-id 相同。

使用 jquery 函数(在更改/粘贴/keyup 上)我需要获取 .featurecat-item、.featurecat-label、.featurecat-isactive 类输入值，其 data-id 与当前聚焦的字段数据相同- 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 属性的元素，请使用 [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">