Question

我对jQuery很新。我是一个老式的计时器PHP开发人员，并且在沙子中停留了太长时间以避免新的前端技术。

无论如何我终于放弃了。我正在使用多个jQuery UI滑块。当更改1个滑块时，我会在正在编辑的字段中触发更改事件。

因此，当任何类slider-total的输入发生变化时，我会运行此函数。

$(document).ready(function() {
    $( "#slider-domains" ).slider({
        orientation: "vertical",
        range: "min",
        min: 1,
        max: 20,
        value: 1,
        slide: function( event, ui ) {
            $( "#domains" ).val( ui.value ).trigger("change");
        }

    });

    $( "#slider-diskspace" ).slider({
        orientation: "vertical",
        range: "min",
        min: 50,
        max: 5000,
        step: 50,
        value: 50,
        slide: function( event, ui ) {
            $( "#diskspace" ).val( ui.value ).trigger("change");
        }

    });

    $( "#slider-mysql" ).slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 20,
        value: 0,
        slide: function( event, ui ) {
            $( "#mysql" ).val( ui.value ).trigger("change");
        }
    });


    $( "#slider-emails" ).slider({
        orientation: "vertical",
        range: "min",
        min: 1,
        max: 50,
        value: 1,
        slide: function( event, ui ) {
            $( "#emails" ).val( ui.value ).trigger("change");
        }

    });

    $( "#slider-ftp" ).slider({
        orientation: "vertical",
        range: "min",
        min: 1,
        max: 50,
        value: 1,
        slide: function( event, ui ) {
            $( "#ftp" ).val( ui.value ).trigger("change");
        }
    });

    $( "#slider-subdom" ).slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 20,
        value: 0,
        slide: function( event, ui ) {
            $( "#subdom" ).val( ui.value ).trigger("change");
        }
    });

    $( "#domains" ).val( $( "#slider-domains" ).slider( "value" ) );
    $( "#diskspace" ).val( $( "#slider-diskspace" ).slider( "value" ) );
    $( "#mysql" ).val( $( "#slider-mysql" ).slider( "value" ) );
    $( "#emails" ).val( $( "#slider-emails" ).slider( "value" ) );
    $( "#ftp" ).val( $( "#slider-ftp" ).slider( "value" ) );
    $( "#subdom" ).val( $( "#slider-subdom" ).slider( "value" ) );


    $('.slider-total').change(function(){

            var ppdomain = 0.2084;
            var ppmysql = 0.05;
            var pphundredmb = 0.025;
            var ppemail = 0.028;
            var ppftp = 0.014;
            var ppsubd = 0.007;

            var nodomains = $("#domains").val();
            var mysql = $("#mysql").val();
            var diskspace = $("#diskspace").val();
            var emails = $("#emails").val(); 
            var ftp = $("#ftp").val();
            var subdom = $("#subdom").val();

            var total = 0;

            total = parseFloat(ppdomain * parseFloat(nodomains) + ppmysql * parseFloat(mysql) + pphundredmb * parseFloat(diskspace) + ppemail * parseFloat(email) + ppftp * parseFloat(ftp) + ppsubd * parseFloat(subdom));

            alert(total);

    });

});

警报只是用于测试，但它不起作用!!它也打破了滑块功能。幻灯片仍然更新输入，但幻灯片动画停止工作。当我删除此代码时，一切都很好。

那我哪里出错了！

Answer 1

您的问题实际上可以通过更简单的方式解决，如果没有真正与此字段交互，您无法真正触发$('.slider-total').change()事件，您可以将其定义为常规JS函数，如下所示：

function change(){
        var ppdomain = 0.2084;
        var ppmysql = 0.05;
        var pphundredmb = 0.025;
        var ppemail = 0.028;
        var ppftp = 0.014;
        var ppsubd = 0.007;

        var nodomains = $("#domains").val();
        var mysql = $("#mysql").val();
        var diskspace = $("#diskspace").val();
        var emails = $("#emails").val(); 
        var ftp = $("#ftp").val();
        var subdom = $("#subdom").val();

        var total = 0;

        total = parseFloat(ppdomain * parseFloat(nodomains) + ppmysql * parseFloat(mysql) + pphundredmb * parseFloat(diskspace) + ppemail * parseFloat(email) + ppftp * parseFloat(ftp) + ppsubd * parseFloat(subdom));

        alert(total);
}

对于每个滑块，您已经有一个“更改”事件，slide一旦您更改它就被调用，就像您调用更改函数而不是尝试触发它一样，例如：

slide: function( event, ui ) {
    $( "#domains" ).val( ui.value );
    change();
}

选中 FIDDLE ：http://jsfiddle.net/LNjGz/进行只有一个字段进行数学测试的测试

修改

剪掉这一行以及以下内容：

$( "#domains" ).val( $( "#slider-domains" ).slider( "value" ) );

每个滑块的每个slide事件都已经设置了相应的文本输入，因此无需额外的工作

简单的数学打破了jQuery UI Slider

1 个答案: