我有输入表单 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 中使用此功能?
最佳答案
- 要获取
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">
关于javascript - 如何使用 jQuery 获取所有 data-id 输入类值,其中 data-id 与当前焦点字段 data-id 相同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58153186/