foreachループ内のボタンのテキストを変更します

Question

私はボタンをクリックすると、そのボタンのテキストを変更する必要があります。foreachループ内にあります。しかし、問題は、最初のボタンのテキストの変更をそのボタンをクリックするときです。私はクリックした特定のボタンのテキストを変更したい。それはどのように行うのですか？

フロントエンドパート

@foreach($products as $product) 
    <button onclick="this.disabled=true; quoteAdd('{!!$product->id!!}')" id="inquireButton" class="btn btn-danger ">Inquire</button> 
@endforeach 

Javascriptのパート

function quoteAdd(productId) 
{ 
    $("#inquireButton").html('Save'); 
    // other code .. 
} 

Answer 1

次のようなquoteAdd方法にthisキーワードを使用して、ボタンの参照を渡す必要があります。

PHP

@foreach($products as $product) 
    <button onclick="this.disabled=true; quoteAdd('{!!$product->id!!}', this)" id="inquireButton" class="btn btn-danger ">Inquire</button> 
@endforeach 

JS

function quoteAdd(productId, button) { 
    $(button).text('Save'); 
    //other code .. 
} 

FYIid各要素に対して一意でなければなりません。

Answer 2

HTMLのid属性の値は一意である必要がありますので、基本的には間違っています（ループ内で固定IDを使用しないでください）。

かかわらず、この問題は、次の操作を行うことができます。

//フロントエンドパート

@foreach($products as $product) 
    <button onclick="this.disabled=true; quoteAdd(this)" id="inquireButton_{!!$product->id!!}" class="btn btn-danger ">Inquire</button> 
@endforeach 

// Javascriptのパート

function quoteAdd(el) 
{ 
    $(el).html('Save'); 
    // other code .. 
}