jquery 按鈕單擊僅適用於 laravel foreach 循環中的第一個數據

Question

請我有一個數據，我從 db 循環到 laravel 視圖，它作為輸入字段返回。 當單擊按鈕時，我試圖從 foreach 獲取單獨的輸入，但該按鈕在第一個循環數據上返回

我的代碼：

$('.btn-invest').click(function() {
  var invest_id = $('.btn-invest').attr('data-invest-id');
  var btcaddress = '{{ $info->btc_address }}'
  // alert(invest_id);
  var amount = $('#amount').val();
  var min = $('#min').val();
  // int parse min
  min = parseInt(min);
  // int parse amount
  // amount = parseInt(amount);
  if (amount === '') {
    Swal.fire({
      icon: 'error',
      title: 'Oops...',
      text: 'Please enter amount!',
    })
  } else if (parseInt(amount) < min) {
    Swal.fire({
      icon: 'error',
      title: 'Oops...',
      text: 'Please enter amount greater than minimum amount',
    })
    // alert();
  } else {
    // alert(`Request made, kindly send your payment of ${amount} to:`)
    Swal.fire({
      title: `Request made, kindly send your payment of ${amount} to: ${btcaddress}`,
      text: "",
      icon: "success",
    })
  }
});

這是我為 foreach 循環編寫的代碼，我不知道我是否必須做一些獨特的事情，否則

<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>
        <input type="hidden" name="" id="min" 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>
          <input type="hidden" name="" id="pid" value="{{ $plan->id }}">

          <!-- Input Field Starts -->

          <div class="input-group mb-3">
            <input 
              type="text" 
              id="amount" 
              class="form-control" 
              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>

          <!-- Input Field Ends -->
          
          <p>Maximum Amount is ${{ $plan->maximum_investment ?? '' }}</p>
          
          <!-- Invest Form Button Starts -->
          
          <div class="form-group">
            <button 
              class="btn-invest" 
              data-invest-id="{{ $plan->id }}" 
              type="button" 
              onClick='invest({{ $plan->id }})'>Invest</button>
          </div>
          
          <!-- Invest Form Button Ends -->
          
        </form>
      </div>
    </div>
  </div>
  @endforeach
</div>

Answer 1

每個元素的 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>

            <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>
                <input type="hidden" name="" class="pidInput" value="{{ $plan->id }}" />
                <input type="hidden" name="" class="minInput" value="{{ $plan->minimum_investment ?? '' }}" />

                <!-- Input Field Starts -->

                <div class="input-group mb-3">
                    <input type="text" class="form-control amountInput" 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>

                <!-- Input Field Ends -->

                <p>Maximum Amount is ${{ $plan->maximum_investment ?? '' }}</p>

                <!-- Invest Form Button Starts -->

                <div class="form-group">
                    <button class="btn-invest" data-invest-id="{{ $plan->id }}" type="button" onClick="invest({{ $plan->id }})">Invest</button>
                </div>

                <!-- Invest Form Button Ends -->
            </form>
        </div>
    </div>
</div>
@endforeach
</div>

Jquery

<script type="text/javascript">
$(".btn-invest").click(function () {
    var invest_id = $(this).attr("data-invest-id");
    var btcaddress = "{{ $info->btc_address }}";

    var formEl = $(this).closest("form");
    var amount = formEl.find(".amountInput").val();
    var min = formEl.find(".minInput").val();

    /*console.log(invest_id);
    console.log(btcaddress);
    console.log(formEl);
    console.log(amount);
    console.log(min);*/

    // int parse min
    min = parseInt(min);
    // int parse amount
    // amount = parseInt(amount);
    if (amount === "") {
        Swal.fire({
            icon: "error",
            title: "Oops...",
            text: "Please enter amount!",
        });
    } else if (parseInt(amount) < min) {
        Swal.fire({
            icon: "error",
            title: "Oops...",
            text: "Please enter amount greater than minimum amount",
        });
        // alert();
    } else {
        // alert(`Request made, kindly send your payment of ${amount} to:`)
        Swal.fire({
            title: `Request made, kindly send your payment of ${amount} to: ${btcaddress}`,
            text: "",
            icon: "success",
        });
    }
});
</script>