ボタンからテキストボックスにテキストを転送するには、Jqueryを使用しますか？ [コード提供]

Question

私のオリジナルコードは、ラーベールのブレードフォーマットでした。これはコードです：

<div class="text-center textbox"> 
     @for($i=0 ; $i<$data->length ; $i++) 
     <input type="text" name="txt{{$i+1}}" id="txt{{$i+1}}"> 
     @endfor 
    </div> 

    <div class="text-center char-btn"> 
     @for($i=0 ; $i<$data->length ; $i++) 
     <button type="button" name="charbutton" id="charbutton" class="btn btn-success">{{$data->shuffle[$i]}}</button> 
     @endfor 
    </div> 

ビューを提供するには、ここでhtmlビューを使用します。

$(document).ready(function() { 
 
    $('button[name=charbutton]').click(function() { 
 
     var string = $(this).text(); 
 
     console.log(string); 
 
     addText(string); 
 
    $(this).prop('disabled', true); 
 
    }); 
 
}); 
 

 
var length = 5; 
 

 
function addText(string) 
 
{ 
 
    var i; 
 
    for(i=1; i<= length; i++) 
 
    { 
 
    var inp = $('input[type=text]').val(); 
 

 
    if(inp == '') 
 
    { 
 

 
     $('input[type=text]').val(string); 
 
     i = length + 1; 
 
    } 
 
    else{ 
 
     console.log ('else'); 
 
    } 
 
    } 
 
}

input { 
 
    border: 0; 
 
    outline: 0; 
 
    background: transparent; 
 
    border-bottom: 2px solid black; 
 
    width: 20px; 
 
} 
 

 
.textbox{ 
 
     margin: 30px 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="text-center textbox"> 
 
    <input type="text" name="txt1" id="txt1"> 
 
    <input type="text" name="txt2" id="txt2"> 
 
    <input type="text" name="txt3" id="txt3"> 
 
    <input type="text" name="txt4" id="txt4"> 
 
    <input type="text" name="txt5" id="txt5"> 
 
    
 
    </div> 
 

 
    <div class="text-center char-btn"> 
 
    
 
     <button type="button" name="charbutton" id="charbutton" class="btn btn-success">o</button> 
 
     <button type="button" name="charbutton" id="charbutton" class="btn btn-success">t</button> 
 
     <button type="button" name="charbutton" id="charbutton" class="btn btn-success">h</button> 
 
     <button type="button" name="charbutton" id="charbutton" class="btn btn-success">m</button> 
 
     <button type="button" name="charbutton" id="charbutton" class="btn btn-success">u</button> 
 
    
 
    </div>

私の問題は、（あなたが文字をクリックすると、すべてのテキストボックスは、同じ文字に置き換えられます）この問題を解決する方法です。 jQueryので

Answer 1

、

$('input[type=text]') 

が全体ノードの集合です。

一度にそれぞれの要素、1を調べたい場合には

document.querySelectorAll('input[type=text]') 

のと同等です：

document.querySelectorAll('input[type=text]')[0] 
document.querySelectorAll('input[type=text]')[1] 
document.querySelectorAll('input[type=text]')[2] 

など

その後、あなたはjQueryので.eq(index)方法が必要になります。

$('input[type=text]').eq(0) 
$('input[type=text]').eq(1) 
$('input[type=text]').eq(2) 

実施例：

あなたが `やっている

$(document).ready(function() { 
 

 
    $('button[name^=charbutton]').click(function() { 
 
     var string = $(this).text(); 
 
     console.log(string); 
 
     addText(string); 
 
    $(this).prop('disabled', true); 
 
    }); 
 

 
var length = 5; 
 

 
function addText(string) { 
 

 
    for (var i = 0; i < length; i++) { 
 
    var inp = $('input[type=text]').eq(i).val(); 
 

 
    if (inp === '') { 
 
     $('input[type=text]').eq(i).val(string); 
 
     break; 
 
    } 
 
    } 
 
} 
 

 
});

input { 
 
    border: 0; 
 
    outline: 0; 
 
    background: transparent; 
 
    border-bottom: 2px solid black; 
 
    width: 20px; 
 
} 
 

 
.textbox{ 
 
     margin: 30px 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="text-center textbox"> 
 
<input type="text" name="txt1" id="txt1"> 
 
<input type="text" name="txt2" id="txt2"> 
 
<input type="text" name="txt3" id="txt3"> 
 
<input type="text" name="txt4" id="txt4"> 
 
<input type="text" name="txt5" id="txt5"> 
 
</div> 
 

 

 
<div class="text-center char-btn"> 
 
<button type="button" name="charbutton1" id="charbutton0" class="btn btn-success">o</button> 
 
<button type="button" name="charbutton2" id="charbutton1" class="btn btn-success">t</button> 
 
<button type="button" name="charbutton3" id="charbutton2" class="btn btn-success">h</button> 
 
<button type="button" name="charbutton4" id="charbutton3" class="btn btn-success">m</button> 
 
<button type="button" name="charbutton5" id="charbutton4" class="btn btn-success">u</button> 
 
</div>