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是单击的按钮。所以我将代码更改为使用$('select')，您可能希望通过向select添加id并使用id作为选择器来使其更具体。

用按钮替换回车键

3 个答案: