jquery - 用按钮替换输入键

Question

当按下回车键时，我生成了这个图表。我想改用一个简单的按钮：http: //www.cb-dev.tk/A/

这是 init.js 文件：

$(function(){
    var input = $('.input'),
        bar = $('.bar'),
        bw = bar.width(),
        percent = bar.find('.percent'),
        ps =  percent.find('span'),
        name = 'rotate';

    input.on('keydown', function(e){
        if (e.keyCode == 13){
            var t = $(this), val = t.val();
            if (val >=0 && val <= 1000){
                var w = 1000-val, pw = (bw*w)/1000,
                    pa = {
                        width: w/10+'%'
                    },
                    cw = (bw-pw)/2,
                    ca = {
                        left: cw
                    }
                ps.animate(pa);                 
            } 
        }
    });
});

怎么做 ？

Answer 1

您可以执行以下操作：

var e = jQuery.Event("keydown");
e.which = 13;
$('button.yourbutton').click(function(){
  input.trigger(e); // input is your $('.input')
});

通过这样做input.trigger(e)，您正在“模拟”在该输入上按下回车键。所以基本上你在输入keydown上调用那个回调函数......

如果您希望另一个元素调用该函数，只需绑定其他内容而不是输入，即$('button').click(...)

Answer 2

只需将所有代码放入按钮单击事件中，然后摆脱您现在拥有的按键代码

$('button.yourbutton').click(function(){
     var input = $('.input'),
     bar = $('.bar'),
     bw = bar.width(),
     percent = bar.find('.percent'),
     ps =  percent.find('span'),
     name = 'rotate';
     var t = input, val = t.val();
        if (val >=0 && val <= 1000){
            var w = 1000-val, pw = (bw*w)/1000,
                pa = {
                    width: w/10+'%'
                },
                cw = (bw-pw)/2,
                ca = {
                    left: cw
                }
            ps.animate(pa);                 
        } 
});

Answer 3

$('#button-id').on('click', function(e){
    var t = $('select'), val = t.val();
    if (val >=0 && val <= 1000){
        var w = 1000-val, pw = (bw*w)/1000,
            pa = {
                width: w/10+'%'
            },
            cw = (bw-pw)/2,
            ca = {
                left: cw
            }
        ps.animate(pa);                 
    }
});

因此，您必须修改按钮的选择器。此外，在您的页面上，您从单个输入中获取数据。您以前可以使用$(this)来获取该选择元素，但现在不能，因为this单击的是按钮。所以我将代码更改为 use $('select')，您可能希望通过向 select 添加一个 id 并将 id 用作选择器来使其更具体。