Question

页面上有6个按钮。点击每个按钮，我会执行以下操作：

$('#btn1').click(function(){
        $('#txt').val("+");
    }
)

$('#btn2').click(function(){
        $('#txt').val("-");
    }
)

$('#btn3').click(function(){
        $('#txt').val("*");
    }
)

如果您观察到，每次点击的功能都保持不变，唯一的区别是文本框中添加了一个新字符。我怎么能一般地写这个呢？

Answer 1

首先，我建议委派您的事件监听器，以减少代码混乱。您可以使用HTML5数据属性和$.data来获得所需的效果：

<div id="buttons">
  <button id="btn1" data-text="+">Button 1</button>
  <button id="btn2" data-text="-">Button 2</button>
  <button id="btn3" data-text="*">Button 3</button>
</div>

然后在你的JS文件中：

$('#buttons').delegate('button', 'click', function(e) {
  $('#txt').val($(this).data('text'));
});

Answer 2

如果您的html格式如下：

<button type="button" sign="+">Button Value</button>

然后你可以像这样处理它：

$('#btn1, #btn2, #btn3').click(function(){
    $('#txt').val($(this).attr('sign'));
});

我认为这就是pimvdb的建议。

编辑：嘿。在我点击提交按钮之前，他编辑了他的解决方案

Answer 3

$('#btn1, #btn2, #btn3').click(function(){
        $('#txt').val($(this).data('sign'));
    }
)

然后在HTML中定义：

<input ... data-sign="+">

等等。

演示：http://jsfiddle.net/zvPCz/。

手柄按钮一般点击

3 个答案: