javascript - 当用户单击按钮 x 时，将文本添加到输入字段 x

Question

我有一个文本输入列表，每个输入都有一个关联的按钮。这是我的设置:jsfiddle

我可以让它单独工作(请参阅正在工作的顶部按钮)，

但是我怎样才能做到单击任何按钮都会更改其关联输入的文本(button# --> text#)，而不需要为每个项目重复代码？

HTML:

<input type="text" id="text1" style="width: 150px;" /><input type="button" value="Click Me" id="button1" /><br/>
<input type="text" id="text2" style="width: 150px;" /><input type="button" value="Click Me" id="button2" /><br/>
<input type="text" id="text3" style="width: 150px;" /><input type="button" value="Click Me" id="button3" /><br/>
<input type="text" id="text4" style="width: 150px;" /><input type="button" value="Click Me" id="button4" /><br/>
<input type="text" id="text5" style="width: 150px;" /><input type="button" value="Click Me" id="button5" /><br/>

jQuery:

$(function () {
    $('#button1').on('click', function () {
        var text = $('#text1');
        text.val('Stuff');    
    });
});

Answer 1

1. 使用属性选择器在所有按钮上绑定(bind)事件。 $('[id^=button]') 将选择 id 以 button 开头的所有元素
2. 在事件处理程序中使用 $(this) 来访问被单击的元素。
3. 使用prev，将选择该元素的上一个同级元素。
4. 我建议为所有按钮添加相同的类，以便可以使用该类绑定(bind)事件。 $('.myButtons').on('click', function() {});，然后您就不再需要每个按钮上的 id 了。这对于设置所有元素的样式也很有用。

$('[id^=button]').on('click', function() {
  $(this).prev().val('Stuff');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="text" id="text1" style="width: 150px;" />
<input type="button" value="Click Me" id="button1" />
<br/>
<input type="text" id="text2" style="width: 150px;" />
<input type="button" value="Click Me" id="button2" />
<br/>
<input type="text" id="text3" style="width: 150px;" />
<input type="button" value="Click Me" id="button3" />
<br/>
<input type="text" id="text4" style="width: 150px;" />
<input type="button" value="Click Me" id="button4" />
<br/>
<input type="text" id="text5" style="width: 150px;" />
<input type="button" value="Click Me" id="button5" />
<br/>

---

如果更改 HTML 结构，上述代码将不起作用。您可以使用如下更灵活的方法

1. 使用 data-* 自定义属性来存储按钮与文本框的关联。
2. 单击按钮时获取 data-target 属性的值并更新相应文本框的值。

$('.button').on('click', function() {
  $($(this).data('target')).val('Stuff');
});

.text {
  width: 150px;
  border: solid 1px green;
}
.button {
    border: solid 1px green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="text" id="text1" class="text" />
<input type="button" value="Click Me" class="button" data-target="#text1" />
<br/>
<input type="text" id="text2" class="text" />
<input type="button" value="Click Me" class="button" data-target="#text2" />
<br/>
<input type="text" id="text3" class="text" />
<input type="button" value="Click Me" class="button" data-target="#text3" />
<br/>
<input type="text" id="text4" class="text" />
<input type="button" value="Click Me" class="button" data-target="#text4" />
<br/>
<input type="text" id="text5" class="text" />
<input type="button" value="Click Me" class="button" data-target="#text5" />
<br/>