根据隐藏的输入值更新 table 个单元格

Question

我有以下 select 个列表，它们位于 table 个单元格中。 select 列表是相同的，但每个单元格内都有一组独特的隐藏值，即型号和年份。我基本上希望背景颜色在包含我正在更改的 select 列表的单元格内更新，成功时，通过 ajax。我几乎拥有它，只是它改变了所有单元格。

<td>                                                                                                                                                                               
    <input type="hidden" name="model" value="2" />
    <input type="hidden" name="year" value="2020" />
                                        
    <select name="select-vehicle">
        <option value="0"></option>
        <option value="1">Car 1</option>
        <option value="2">Car 2</option>
    </select>
</td>
<td>                                                                                                                                                                               
    <input type="hidden" name="model" value="1" />
    <input type="hidden" name="year" value="2019" />
                                        
    <select name="select-vehicle">
        <option value="0"></option>
        <option value="1">Car 1</option>
        <option value="2">Car 2</option>
    </select>
</td>

    $ ('select[name="select-vehicle"]').change(function() {
        var data = {
            'car_id'   : $(this).val(),
            'model_id' : $(this).siblings('input[type="hidden"][name="model"]').val();
            'year'     : $(this).siblings('input[type="hidden"][name="year"]').val();
        $.ajax({
            url: 'cars/saveVehicle',
            data: data,
            method: 'post',
            success: function(response) {
                $('select[name="select-vehicle"]').closest('td').addClass('bg-success');
            },
            error: function(jqXHR, textStatus, errorThrown){
                var errorAlert = $(thisForm).find('.alert');
                $(errorAlert).find('p').text('Unable to save');
                $(errorAlert).show();
            },
            complete: function(){
                $(errorMessage).hide();
            }
        });
        event.preventDefault();
    });

Answer 1

您需要将 $(this) 捕获为变量，以便稍后在 ajax 中引用：

    $('select[name="select-vehicle"]').change(function() {
        let _this = $(this); // capture it here
        var data = {...}
        $.ajax({
            ...
            success: function(response) {
                // then access it here
                _this.closest('td').addClass('bg-success');
            }
        ...
        });
        event.preventDefault();
    });

根据隐藏的输入值更新 table 个单元格

Update table cell depending on hidden input values

css

ajax

jquery