如何使用Jquery将文本从按钮传输到文本框？ [提供的代码]

Question

我的原始代码是laravel刀片格式。这是代码：

  <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>

我的问题是如何解决这个问题（当你点击一个字母时，所有文本框都会被相同的字母替换）。

Answer 1

在jQuery中，

$('input[type=text]')

是整个节点集合。

相当于

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)

工作示例：

＆＃13;

＆＃13;

$(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;
    }
  }
}

});

＆＃13;

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

.textbox{
      margin: 30px 0;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;