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

debugcn 发表于 Dev

43Tesseracts

我有一个文本输入列表，每个文本输入都有一个关联的按钮。这是我的设置：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');    
    });
});

杜沙尔

使用属性选择器在所有按钮上绑定事件。$('[id^=button]')将选择所有以id开头的元素button
$(this)在事件处理程序内部使用可以访问单击的元素。
使用prev，将选择元素的上一个同级。
我建议向所有按钮添加相同的类，以便可以使用该类来绑定事件。$('.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结构，则上面的代码将不起作用。您可以使用以下更灵活的方法

使用data-*自定义属性存储按钮与文本框的关联。
单击按钮后，获取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/>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。