AJAX成功回调后如何用jQuery仅修改当前同class按钮的CSS

问题背景 #

在HTML表格展示查询结果时，每行需设置一个按钮执行AJAX更新查询，要求AJAX请求成功后仅修改当前点击按钮的颜色。

最初编写的代码中，success回调内的$(this).css('background-color','#f50519')无法生效：

function myFunction() {
$.ajax({
    url: 'action.php',
    type: 'POST',
    data: 'code='+<?php echo $ab["code"]; ?>+'&action3='+value,
    success: function(result) {
        $(this).css('background-color','#f50519');
    }
   })
}

使用类选择器会修改所有同class的按钮，用ID选择器仅对第一个按钮生效。后续尝试给变量添加唯一编号并将脚本放入PHP循环，却只有最后一行按钮能正常触发效果，尝试的代码如下：

foreach($result as $ab=>$v) {
    ?>
        <tr>
            <td><?php $no = $ab+1; echo $no; ?></td>
            <td><?php echo $result[$ab]["name"];?></td>
            <td><?php echo $result[$ab]["code"];?></td>
            <td><?php echo $result[$ab]["count(ab.id)"];?></td>
            <form id="form<?php echo $no;?>">
            <td><select name="ac3<?php echo $no;?>" id="action3<?php echo $no;?>">
                    <option value="1">1</option>
                    <option value="2">2</option>
                </select></td>
            <td><button id="bt<?php echo $no;?>" class="btn2" onclick="myFunction()">submit</button></input></td>
            </form>
        </tr>
        <script>
function myFunction() {
var e<?php echo $no;?> = document.getElementById("action3<?php echo $no;?>");
var value<?php echo $no;?> = e<?php echo $no;?>.value;
var text<?php echo $no;?> = e<?php echo $no;?>.options[e<?php echo $no;?>.selectedIndex].text;
   
$('#form<?php echo $no;?>').submit(function(e<?php echo $no;?>){
    e<?php echo $no;?>.preventDefault();
    
$.ajax({
    url: 'action.php',
    type: 'POST',
    data: 'code='+<?php echo $result[$ab]["code"]; ?>+'&action3='+value<?php echo $no;?>,
    success: function(result) {
                $('#bt<?php echo $no;?>').css('background-color','#f50519');
                }
    })
})
}
</script>

解决方案 #

核心问题是循环中重复定义同名函数myFunction，每次循环都会覆盖之前的函数，导致仅最后一次定义的逻辑生效；同时AJAX回调中$(this)指向的是AJAX配置对象而非触发按钮。以下是优化方案：

1. 重构PHP循环生成的前端结构 #

移除内联onclick，通过data-*属性传递必要参数，避免生成大量带编号的ID：

<?php foreach($result as $ab=>$v): 
    $no = $ab + 1;
    $code = $result[$ab]["code"];
?>
<tr>
    <td><?php echo $no; ?></td>
    <td><?php echo $result[$ab]["name"];?></td>
    <td><?php echo $code;?></td>
    <td><?php echo $result[$ab]["count(ab.id)"];?></td>
    <td>
        <select class="action-select" data-code="<?php echo $code; ?>">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </td>
    <td>
        <button class="btn-submit btn2" data-code="<?php echo $code; ?>">submit</button>
    </td>
</tr>
<?php endforeach; ?>

2. 统一的JavaScript处理逻辑（放置在PHP循环外，如页面底部） #

通过类选择器绑定事件，提前保存当前按钮的引用，解决this指向问题：

$(document).ready(function() {
    $('.btn-submit').click(function(e) {
        e.preventDefault();
        // 保存当前点击按钮的引用
        const $currentBtn = $(this);
        // 获取对应下拉框的值
        const actionValue = $currentBtn.closest('tr').find('.action-select').val();
        const code = $currentBtn.data('code');

        $.ajax({
            url: 'action.php',
            type: 'POST',
            // 用结构化对象传递参数，避免字符串拼接的安全问题
            data: {
                code: code,
                action3: actionValue
            },
            success: function(result) {
                // 直接操作提前保存的按钮引用
                $currentBtn.css('background-color','#f50519');
            }
        });
    });
});

关键改进点 #

• 避免循环内重复定义同名函数，使用统一的事件处理逻辑
• 用data-*属性传递参数，简化DOM元素的关联方式
• AJAX请求前保存当前按钮的jQuery对象，确保回调能精准操作触发按钮
• 改用结构化data对象传递参数，提升代码安全性与可读性

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