Laravel foreach循环中jQuery按钮点击仅对第一条数据生效问题求助

这个问题我之前也碰到过，核心原因是重复的ID选择器和事件绑定的上下文错误——你在foreach循环里给每个表单元素都用了相同的ID（比如id="amount"、id="min"），而jQuery通过ID选择元素时只会返回第一个匹配项，所以不管点哪个按钮，拿到的都是第一条数据的值。

下面是具体的修复方案：

第一步：替换重复ID为类名 #

HTML要求ID必须唯一，循环生成多个相同ID会导致选择器失效。把所有重复的ID改成类名：

<div class="row text-center">
    @foreach($plans as $plan)
        <div class="col-lg-6 col-md-12 col-sm-12 d-flex align-items-stretch">
            <div class="icon-box">
                <div class="btc">
                    <img src="{{ asset('images/investment/15.png') }}" alt="btc" width="10%">
                </div>
                <div class="btc-content">
                    <h3 style="color:#fff;">{{ $plan->title ?? '' }}</h3>
                    <!-- 把id="min"改成class="min-input" -->
                    <input type="hidden" name="" class="min-input" value="{{ $plan->minimum_investment ?? '' }}">
                    <ul class="list-unstyled">
                        <li><i class="fas fa-atom"></i>{{ $plan->dividends ?? '' }}</li>
                        <li><i class="fas fa-atom"></i> {{ $plan->days ?? '' }} Days</li>
                        <li><i class="fas fa-atom"></i> Return {{ $plan->returns ?? '' }}%</li>
                        <li><i class="fas fa-atom"></i> Min. investment is ${{ $plan->minimum_investment ?? '' }}</li>
                    </ul>
                </div>
                <div class="btc-input">
                    <form>
                        <!-- 把id="pid"改成class="plan-id" -->
                        <input type="hidden" name="" class="plan-id" value="{{ $plan->id }}">
                        <div class="input-group mb-3">
                            <!-- 把id="amount"改成class="amount-input" -->
                            <input type="text" class="form-control amount-input" placeholder="Min. ${{ $plan->minimum_investment ?? '' }} BTC" aria-label="Recipient's username" aria-describedby="basic-addon2">
                            <div class="input-group-append">
                                <span class="input-group-text" id="basic-addon2">BTC</span>
                            </div>
                        </div>
                        <p>Maximum Amount is ${{ $plan->maximum_investment ?? '' }}</p>
                        <div class="form-group">
                            <!-- 移除重复的onClick绑定，避免冲突 -->
                            <button class="btn-invest" data-invest-id="{{ $plan->id }}" type="button">Invest</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endforeach
</div>

第二步：修改jQuery代码，基于上下文获取元素 #

通过$(this)指代当前点击的按钮，再定位到它所属的表单，在表单范围内获取对应输入值，这样就能精准匹配当前循环项：

$('.btn-invest').click(function() {
    // 获取当前点击的按钮
    const $currentBtn = $(this);
    // 找到按钮所在的表单（上下文范围）
    const $currentForm = $currentBtn.closest('form');
    
    // 从当前表单中获取对应的值
    const invest_id = $currentBtn.attr('data-invest-id');
    const btcaddress = '{{ $info->btc_address }}';
    const amount = $currentForm.find('.amount-input').val();
    const min = $currentForm.find('.min-input').val();
    const minInt = parseInt(min);
    const amountInt = parseInt(amount);

    // 完善校验逻辑，避免非数字输入导致错误
    if (!amount) {
        Swal.fire({
            icon: 'error',
            title: 'Oops...',
            text: 'Please enter amount!',
        });
    } else if (isNaN(amountInt) || amountInt < minInt) {
        Swal.fire({
            icon: 'error',
            title: 'Oops...',
            text: 'Please enter amount greater than minimum amount',
        });
    } else {
        Swal.fire({
            title: `Request made, kindly send your payment of ${amount} to: ${btcaddress}`,
            text: "",
            icon: "success",
        });
    }
});

关键修改说明 #

1. 唯一ID原则：永远不要在循环中生成重复ID，类名才是标识同类型元素的正确方式。
2. 上下文定位：用closest('form')限制选择范围，确保只获取当前按钮所在表单内的输入值，而不是全局第一个匹配项。
3. 避免重复事件绑定：移除按钮上的onClick属性，因为已经通过jQuery给.btn-invest绑定了全局点击事件，重复绑定会导致逻辑混乱。
4. 增强合法性校验：增加isNaN(amountInt)判断，防止用户输入非数字内容引发错误。

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