如何通过keyup事件结合room-id计算成本？动态类选择器问题

问题分析 #

你用Laravel Blade循环生成带动态类cost-{{$room_type->id}}的成本输入框，想通过keyup事件根据room-id计算总成本，但当前jQuery脚本存在几个核心问题导致失效：

• 选择器不匹配：Blade里生成的类是cost-xxx，但jQuery里写的是.costxxx，缺失连字符导致无法选中目标元素
• 无法精准定位数据：直接用.cost会选中所有同类元素，无法针对当前room-id对应的字段单独计算
• 缺少关联标识：输入框未绑定data-room-type-id属性，无法获取当前输入框对应的room ID

修正方案 #

1. 调整Blade表单代码 #

给输入框添加通用类用于统一绑定事件，同时绑定data-room-type-id属性关联room ID，修正name属性避免提交时数据覆盖：

@foreach($room_types as $room_type)
    {!! Form::text('cost['.$room_type->id.']', null, [
        'class' => 'form-control room-cost cost-'.$room_type->id, 
        'placeholder' => 'Enter Cost',
        'data-room-type-id' => $room_type->id
    ]) !!}
    {!! $errors->first('cost.*','<span class="help-block text-danger">:message</span>') !!}   
    
    <!-- 假设profit、tax-percentage、total-cost也与当前room-id关联，示例如下 -->
    {!! Form::text('profit['.$room_type->id.']', null, [
        'class' => 'form-control room-profit profit-'.$room_type->id,
        'data-room-type-id' => $room_type->id
    ]) !!}
    {!! Form::text('tax_percentage['.$room_type->id.']', null, [
        'class' => 'form-control room-tax tax-'.$room_type->id,
        'data-room-type-id' => $room_type->id
    ]) !!}
    {!! Form::text('total_cost['.$room_type->id.']', null, [
        'class' => 'form-control room-total total-cost-'.$room_type->id,
        'readonly' => true
    ]) !!}
@endforeach

2. 修正jQuery脚本 #

用通用类room-cost统一绑定keyup事件，通过data属性获取当前room ID，精准定位对应字段后执行计算：

// 给所有成本输入框绑定keyup事件
$('.room-cost').keyup(function() {
    var roomTypeId = $(this).data('room-type-id');
    
    // 精准获取当前room-id对应的各字段值，用|| 0处理空值/非数字避免NaN错误
    var cost           = parseFloat($('.cost-' + roomTypeId).val()) || 0;
    var profit         = parseFloat($('.profit-' + roomTypeId).val()) || 0;
    var tax_percentage = parseFloat($('.tax-' + roomTypeId).val()) || 0;

    checkNum('.cost-' + roomTypeId); 
    var total_cost = calculate_total_cost(cost, profit, tax_percentage);
    // 更新对应room-id的总成本输入框
    $('.total-cost-' + roomTypeId).val(total_cost);
});

关键说明 #

• 通用类room-cost用于统一绑定事件，避免逐个绑定动态类的冗余操作
• data-room-type-id作为关联标识，确保能精准匹配当前room对应的所有字段
• 给parseFloat添加|| 0处理空值或非数字输入，避免计算时出现NaN错误

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