当用户单击按钮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. 使用属性选择器在所有按钮上绑定事件。 $('[id^=button]')将选择ID以button
开头的所有元素
2. 在事件处理程序中使用$(this)来访问已单击的元素。
3. 使用prev，将选择元素的上一个兄弟。
4. 我建议在所有按钮中添加相同的类，以便可以使用该类绑定事件。 $('.myButtons').on('click', function() {});，然后您不再需要每个按钮id。这对于设置所有元素的样式也很有用。
＆＃13;
＆＃13;
$('[id^=button]').on('click', function() {
  $(this).prev().val('Stuff');
});
＆＃13;
<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/>
＆＃13;
＆＃13;
＆＃13;

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

1. 使用data-*自定义属性存储按钮与文本框的关联。
2. 单击该按钮时，获取data-target属性的值并更新相应文本框的值。
＆＃13;
＆＃13;
$('.button').on('click', function() {
  $($(this).data('target')).val('Stuff');
});
＆＃13;
.text {
  width: 150px;
  border: solid 1px green;
}
.button {
    border: solid 1px green;
}
＆＃13;
<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/>
＆＃13;
＆＃13;
＆＃13;

Answer 2

您可以使用 attribute start with selector 和 prev()

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

$(function () {
    $('input:button').on('click', function () {
        var text = $(this).prev();
        text.val('Stuff');    
    });
});

使用input：按钮作为选择器并使用.prev（）

demo

Answer 4

这是一个Jsfiddle：

enter link description here

代码：

$(function () {
    $('.button').on('click', function () {

        console.log(1)

        var this_id = $(this)[0].id.split('button')[1];
        console.log(this_id)
        $('#text' + this_id).val('Stuff');
    });
});

Answer 5

对于按钮，使用类属性。喜欢

<input type="text" id="text1" style="width: 150px;" /><input type="button" value="Click Me" id="button1" clas="btn"/>

然后使用.btn作为选择器。点击这个得到它的前一个兄弟，输入类型=“文本”。您也可以为所有按钮使用相同的名称，而不是类。

<强>的Javascript;

$(function () {
    $('.btn').on('click', function () {
        var text = $(this).prev();
        text.val('Stuff');    
    });
});

Answer 6

如果您更喜欢vanilla Javascript版本：

document.addEventListener('DOMContentLoaded', function() {
  [].forEach.call(document.querySelectorAll('input[id^=button]'), function(el, i) {
    el.addEventListener('click', function(e) {
      this.previousElementSibling.value = 'Stuff';
    });
  });
});

解释代码：

1. 当页面的所有元素都已加载/可供使用时
2. 我们遍历input以id开头的所有button字段
3. 对于每个元素，我们添加了一个click事件处理程序
4. 触发事件时，我们会查找点击按钮的previousElementSibling
5. 然后，我们将其值更改为'Stuff'，正如您的示例所示。

Answer 7

尝试选择input type="text" id input type="button"，其中最后一个字符对应于点击的id元素$("input[type=button]").click(function() { $("input[type=text][id$=" + this.id.slice(-1) + "]").val(this.id /* "Stuff" */) })最后一个字符

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/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/>

＆＃13;

#!/usr/bin/env python

import numpy as np

test_array=np.array([[99941,1,56765,56767,51785,51793,0,0,0,0],
                 [101150,1,59006,59005,51782,51783,0,0,0,0]])
np.savetxt("test.out",test_array, fmt='%-10s')

＆＃13;

＆＃13;

＆＃13;

Answer 8

首先，您可以选择此$( ":button" )之类的所有按钮，以避免单独调用每个按钮。

然后您可以使用.prev()

获取文本框

所以你的代码应该是这样的

$(function () {
    $( ":button" ).on("click",function(){
        var $txt= $(this).prev();
        $txt.val("Hello World");
    });
});

您可以在此fiddle

进行测试