Question

我使用jQuery UI滑块插件根据价格过滤一些div，在滑块中我希望在显示输出时使用逗号分隔值格式化价格。

这里是jQuery

jQuery(document).ready(function () {
            jQuery('#slider-container').slider({
                range: true,
                min: 1200,
                max: 34000,
                values: [1200, 34000],
                create: function () {
                    jQuery("#amount").val("$1,200        -        $34,000");
                },
                slide: function (event, ui) {
                    jQuery("#amount").val("$" + ui.values[0] + "        -        $" + ui.values[1]);
                    var mi = ui.values[0];
                    var mx = ui.values[1];
                    filterSystem(mi, mx);
                }
            })
        });

        function filterSystem(minPrice, maxPrice) {
            jQuery("li.column").hide().filter(function () {
                var price = parseInt(jQuery(this).data("price"), 10);
                return price >= minPrice && price <= maxPrice;
            }).show();
        }

当我在滑块值中设置逗号值时，如此values: [1,200, 34,000],滑块停止工作，之后甚至不会加载。

如何以逗号分隔显示值？

期待你的答案：）

感谢

Answer 1

你可以在输出上使用toLocaleString（）

here is a fiddle

jQuery(document).ready(function () {
            jQuery('#slider-container').slider({
                range: true,
                min: 1200,
                max: 34000,
                values: [1200, 34000],
                create: function () {
                    var val = "$1,200        -        $34,000";
                    console.log(val);
                    jQuery("#amount").text(val);
                },
                slide: function (event, ui) {
                    var val = "$" + ui.values[0].toLocaleString('us-US') + "        -        $" + ui.values[1].toLocaleString('us-US');
                    console.log(val);

                    jQuery("#amount").text(val);
                    var mi = ui.values[0];
                    var mx = ui.values[1];
                    filterSystem(mi, mx);
                }
            })
        });

        function filterSystem(minPrice, maxPrice) {
            jQuery("li.column").hide().filter(function () {
                var price = parseInt(jQuery(this).data("price"), 10);
                return price >= minPrice && price <= maxPrice;
            }).show();
        }

jQuery UI滑块逗号分隔值

1 个答案: