如何用jQuery获取与当前聚焦元素同data-id的featurecat类元素值

嘿，我来帮你完善这段jQuery代码～你的核心问题是没有根据当前触发元素的data-id精准筛选同组输入框，导致每次拿到的都是页面中第一个对应类的元素值，咱们调整一下就能解决：

完整的实现代码 #

$(document).ready(function(){
  $(".featurecat").on("change paste keyup", function() {
    // 拿到当前触发事件元素的data-id
    var current_id = $(this).data('id');
    
    // 根据data-id定位同组的三个输入元素，避免拿到其他组的值
    var item = $('.featurecat-item[data-id="' + current_id + '"]').val().replace(/,/g, "");
    var label = $('.featurecat-label[data-id="' + current_id + '"]').val().replace(/,/g, "");
    var isactive = $(".featurecat-isactive[data-id="' + current_id + '"]").prop('checked') ? 1 : 0;
    
    var data = "item:"+item+"| label:"+label+"| isactive:"+isactive;
    console.log(data);
  });
});

关键细节说明 #

• 获取当前组ID：$(this).data('id')是jQuery获取data-*属性的便捷方式，它会自动解析属性值，比$(this).attr('data-id')更易用。
• 精准筛选同组元素：通过类选择器 + 属性选择器的组合'.featurecat-item[data-id="' + current_id + '"]'，确保只选中和当前元素同data-id的输入框，不会混淆其他组的内容。
• 事件覆盖全面：你选择的change paste keyup事件已经覆盖了输入框的主要交互场景——手动输入、粘贴内容、复选框状态切换，这个考虑很周全。

现在不管你操作哪一组的哪个输入框，都会正确输出该组三个元素的对应值啦～

内容的提问来源于stack exchange，提问作者Optimus Prime