PHP循环生成jQuery点赞踩模块无法获取按钮属性及展示AJAX响应问题

1. 修复前端模板（foreach循环内代码） #

原有代码存在ID重复、无法区分点赞/踩按钮的问题，修改如下：

<?php foreach ($reviews as $rev): ?>
<form class="form-horizontals1" method="post" >
    <input type="hidden" name="ReviewId" value="<?php echo $rev->id;?>">
    
    <button class="likebutn_r" data-vote="1" type="button">
        <img src="<?php echo base_url(); ?>/assets/img/thumb.png" height="24" width="24">
    </button>
    <label class="lilkcount up-count"><?php echo $rev->up_votes; // 替换为实际点赞数字段 ?></label>

    <button class="likebutn_r" data-vote="0" type="button">
        <img src="<?php echo base_url(); ?>/assets/img/thumbdown.png" height="24" width="24">
    </button>
    <label class="lilkcount down-count"><?php echo $rev->down_votes; // 替换为实际踩数字段 ?></label>
    <div class="counter"></div>
</form>
<?php endforeach; ?>

修改说明：

• 移除所有重复的固定ID，改用类名和自定义属性区分元素
• 给点赞/踩按钮增加data-vote自定义属性直接存储投票值（1=赞，0=踩）
• 按钮类型改为button避免默认表单提交
• 给计数标签增加up-count/down-count类名方便后续更新，计数器改用类名counter避免ID重复

2. 修改后端控制器返回结构化JSON数据 #

原有直接拼接输出两个数值的方式前端无法拆分，改成返回JSON格式：

function AddVote()
{
    // 设置返回格式为JSON
    header('Content-Type: application/json');
    $ReviewId = $this->input->post('ReviewId'); // 建议用CI原生输入类更安全
    $vote = $this->input->post('vote');
    
    $result = [
        'TotalUpVotes' => $this->M_main->CountSubmittedCoinVote($ReviewId,$vote),
        'TotalDownVotes' => $this->M_main->CountSubmittedDownVotes($ReviewId,$vote),
        'msg' => '投票成功' // 可自定义返回提示内容
    ];
    echo json_encode($result);
}

3. 重写jQuery交互逻辑 #

修改后可正确获取投票值，并且只更新当前操作的模块内容：

$(document).ready(function(){
    // 监听点赞/踩按钮点击
    $('.likebutn_r').on('click', function(e){
        e.preventDefault();
        // 获取当前按钮的投票值
        const voteVal = $(this).data('vote');
        // 获取当前按钮所属的表单对象
        const $form = $(this).closest('.form-horizontals1');
        // 获取当前表单下的计数器容器
        const $counter = $form.find('.counter');
        
        // 构造FormData并加入投票值
        const formData = new FormData($form[0]);
        formData.append('vote', voteVal);

        $.ajax({
            url: '<?php echo base_url();?>main/AddVote',
            type: "post",
            data: formData,
            dataType: 'json',
            processData: false,
            contentType: false,
            cache: false,
            success: function(res){
                // 更新点赞数和踩数
                $form.find('.up-count').text(res.TotalUpVotes);
                $form.find('.down-count').text(res.TotalDownVotes);
                // 在计数器区域展示提示信息
                $counter.html(res.msg);
                // 可选：3秒后清空提示
                setTimeout(() => {$counter.html('')}, 3000);
            }
        });
    });
});

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