foreach 루프 내의 버튼 텍스트 변경

Question

버튼이 있습니다. 버튼을 클릭하면 텍스트가 변경됩니다. foreach 루프 안에 있습니다. 하지만 문제는 그 단추를 처음 단추 텍스트 변경을 클릭 할 때입니다. 내가 클릭 한 특정 단추 텍스트를 변경하고 싶습니다. 어떻게해야합니까?

프런트 엔드 제품

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

자바 스크립트 부분은

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

Answer 1

당신은 다음과 같이 this 키워드 방법 quoteAdd에를 사용하여 버튼의 참조를 전달해야합니다.

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 

// 자바 스크립트 부분

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

:

에 관계없이이 문제는 다음을 수행 할 수 있습니다