1

我有许多输入，每个输入都有一个选择按钮，允许用户选择优惠券代码。

这就是我所拥有的，它具有预期的结果：

<!-- code 1 -->
<input id="code1" type="text" value="codeval1" disabled />
<button id="btn1">Select</button>
<br>
<!-- code 2 -->
<input id="code2" type="text" value="codeval2" disabled />
<button id="btn2">Select</button>

<input id="text" value="" type="text"></input>
<button id="clear" >clear selection</button>

和脚本：

$("#clear").on("click", function() {
       var text = $('#text');
       text.val("");
});

$('#btn1').on('click', function(){
    var text = $('#text');
    var code = $('#code1');
    text.val(code.val());
});

$('#btn2').on('click', function(){
    var text = $('#text');
    var code = $('#code2');
    text.val(code.val());
});

有没有一种更简单的方法可以做到这一点，而不必为每个输入/按钮 ID 重新编写函数？

4

2 回答 2

1

您可以使用单个（匿名）函数完成所有操作，如下所示： 

$("body").on("click","button",function() {
   with ($(this))
     $('#text').val(hasClass('sel')? prev('input').val():'')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- code 1 -->
<input id="code1" type="text" value="codeval1" disabled />
<button class="sel">Select</button>
<br>
<!-- code 2 -->
<input id="code2" type="text" value="codeval2" disabled />
<button class="sel">Select</button>

<input id="text" value="" type="text"></input>
<button class="clear" >clear selection</button>

sel我只是测试单击的按钮 ( )是否存在该类$(this)，然后将前一个输入字段的值复制到目标。否则，我将一个空字符串放入目标中。我的事件绑定是在<body>您的页面上完成的，因此所有按钮都可能具有此功能。在一个实际示例中，您会将范围限制为一个容器（<div>或<form>），其中所有按钮都将具有此功能。

于 2019-08-29T08:10:27.913 回答
0

简单的解决方案

$('.sel').on('click', function(){
    var value= $(this).prev('input').val();
    $('#text').val(value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- code 1 -->
<input id="code1" type="text" value="codeval1" disabled />
<button class="sel">Select</button>
<br>
<!-- code 2 -->
<input id="code2" type="text" value="codeval2" disabled />
<button class="sel">Select</button>

<input id="text" value="" type="text"></input>
<button class="clear" >clear selection</button>

于 2019-08-29T08:34:40.677 回答