如何结合ID与class选择DOM元素？解决ReferenceError报错

我要开发一个包含儿童到达时间、离开时间列的表格功能，目标是通过儿童的可变ID，结合checkboxIn或checkboxOut类精准选中表格内的特定文本输入框。但编写jQuery选择器时出现「Uncaught ReferenceError: checkboxIn is not defined」错误，显然JS将class名识别成了未定义变量。

Laravel Blade 代码片段 #

@foreach($children as $child)         //LARAVEL BLADE SYNTAX
    <tr class="child row">
                                
// Child's Name and ID Goes here - Abreviated

    {{Form::checkbox('timeIn',$child->child_id,false,['style'=>'margin-top:12px;'])}}</td>

    @if($child->timeIn && $child->timeIn !='absent')
        <td class="col-md-2 checkboxIn">  //CLASS "checkboxIn"
            <input readonly="readonly"
                   class="form-control" name="timeIn" type="text" id="{{$child->child_id}}"
                   value="{{Carbon\Carbon::parse($child->timeIn)->format('g:i A') }}">
            <input type="hidden" name="timeinarray[]" id="timeinarray-{{$child->child_id}}">
    @else
        <td class="col-md-2 checkboxIn">  
            <input autocomplete="off" readonly="readonly" class="form-control" type="text" id="{{$child->child_id}}">
            <input type="hidden" name="timeinarray[]" id="timeinarray-{{$child->child_id}}">
        </td> 
    @endif

// DOES A BUNCH OF OTHER STUFF

@endforeach

出错的jQuery代码 #

$('td.timeInReset').click(function () {
    let id = $(this).closest("td").html("<button type='button' class='timeInReset btn btn-light'>Reset</button>").attr('id');

    $('input[type=text][id='+id+'][class='+checkboxIn+']').css({"color": "blue","text-align":"center",
        "border":"2px solid black"}).val('')
})

错误原因 #

选择器中的checkboxIn未加引号，被JS当作变量解析，但该变量未定义，导致报错。需将class名作为字符串拼接进选择器。

修正后的选择器写法 #

方法1：修复字符串拼接 #

把checkboxIn用引号包裹，同时用更简洁的类选择器语法：

$('input[type=text][id='+id+'].checkboxIn').css({"color": "blue","text-align":"center",
    "border":"2px solid black"}).val('')

若输入框有多个class，可使用属性包含选择器确保匹配：

$('input[type=text][id='+id+'][class*="checkboxIn"]')

方法2：更高效的选择器逻辑 #

ID在页面中是唯一的，直接用ID选择器结合类筛选更高效：

$('#' + id + '.form-control').css({"color": "blue","text-align":"center",
    "border":"2px solid black"}).val('')

或者通过父元素定位（不依赖ID，结构更健壮）：

// 找到当前按钮所在的儿童行，再定位到checkboxIn单元格内的文本输入框
$(this).closest('.child.row').find('.checkboxIn input[type=text]')
    .css({"color": "blue","text-align":"center","border":"2px solid black"}).val('')

额外优化建议 #

• 原代码中closest("td").html(...)会替换当前td内容，需确保该td本身带有id属性，否则id值会是undefined。
• 建议给重置按钮所在的td添加data-child-id="{{$child->child_id}}"属性，通过let id = $(this).data('child-id');获取ID，逻辑更清晰，避免ID冲突。

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