将更改、鼠标向上、鼠标向下、鼠标退出、向上键和向下键组合到一个功能中

Combining change, mouseup, mousedown, mouseout, keyup and keydown into the one function

本文关键字:鼠标 一个 功能 退出 组合      更新时间:2023-09-26

我有什么:

  1. 我有一个文本框,它假定在相应的选择框中选择的任何选项的值。
  2. 我正在为更改、鼠标向上、鼠标向下、鼠标退出、向上键和向下键事件重复完全相同的功能

我需要什么:

上述功能是否可以组合成一个以产生更高效的代码?这似乎非常重复。

我的代码:

JSFiddle: http://jsfiddle.net/clarusdignus/843YW/1/

.HTML:

<label>Industry:</label>
<select name="industry">
    <option selected="selected"></option>
    <option value="ag">Agriculture</option>
    <option value="co">Corporate</option>
</select>
<input type="text" disabled="disabled" name="industryspecifier"/>

j查询:

$('select[name=industry]').on('change', function() {
    $('[name=industryspecifier]').val($(':selected',this).val());
});
$('select[name=industry]').on('mouseup', function() {
    $('[name=industryspecifier]').val($(':selected',this).val());
});
$('select[name=industry]').on('mousedown', function() {
    $('[name=industryspecifier]').val($(':selected',this).val());
});
$('select[name=industry]').on('mouseout', function() {
    $('[name=industryspecifier]').val($(':selected',this).val());
});

$('select[name=industry]').on('keydown', function() {
    $('[name=industryspecifier]').val($(':selected',this).val());
});
$('select[name=industry]').on('keyup', function() {
    $('[name=industryspecifier]').val($(':selected',this).val());
});

只需将它们与空格组合即可:

$('select[name=industry]').on('change mouseup mousedown mouseout keydown', function() {
    $('[name=industryspecifier]').val($(':selected',this).val());
});

js小提琴示例

正如 .on() 的文档所述:

事件类型:字符串 一个或多个空格分隔的事件类型和 可选的命名空间,例如"click"或"keydown.myPlugin"。

相关文章: