Javascript函数参数更新

时间:2015-06-16 22:47:20

标签: javascript jquery

我在尝试创建产品展示时遇到了问题。这是我的Javascript代码:http://codeshare.io/MeJQi

此代码的滑块位于:http://therrd.com/screening.html#tenant-Screening

我可以通过两种方式登陆此特定页面。一种方法是另一个页面上的按钮,它将滑块的默认FROM更改为15个单位,显示" Product25"。然后在此页面上另一种着陆方式是滑块的默认起始值​​为30单位,并显示" Product1"。

我遇到的问题是当我通过点击另一页上的按钮登陆此页面时更改默认产品,滑块更新但显示的产品没有。

我想根据滑块更改showProduct()的默认值。

<script>
    $(function() {
        init();

    });

    function init()
    {
        hideAllProducts();
        showProduct(1);


        vals = {max: 2000, min: 1, def: 20} //use your own values here for max min and def
        var param = window.location.href.split("slide=");
        slide = isNaN(param[param.length - 1]) ||
        param[param.length - 1] > vals.max ||
        param[param.length - 1] < vals.min ? vals.def : param[param.length - 1];
        //check if there is a url param, if it's a number and if it's in range

        $("#screeningSlider").ionRangeSlider({
            hide_min_max: true,
            keyboard: true,
            from: slide,
            min: 1,
            max: 2000,
            step: 0,
            grid_num: 4,
            prettify_separator: ",",
            postfix: " Units",
            max_postfix: "+",
            force_edges: true,
            onStart: function (value) {
                document.getElementById("value").innerHTML = (value.from);
            },
            onChange: function (value) {
                document.getElementById("value").innerHTML = (value.from);
            },
            onFinish: function (value) {
                document.getElementById("value").innerHTML = (value.from);
            },
            onUpdate: function (value) {
                document.getElementById("value").innerHTML = (value.from);
            }

        });


         $("#screeningSlider").on("change", function () {
            var $this = $(this),
                    value = $this.prop("value");
             productSliderOnChange(value);

       });


    }


    function productSliderOnChange(value)
    {
        $("#value").text(value);

        if(value == 0)
            hideAllProducts();
        else if ((value > 0) && (value <= 20))
        {
            hideAllProducts();
            showProduct(25);
        }
        else if ((value >= 21) && (value <= 60))
        {
            hideAllProducts();
            showProduct(1);
        }
        else if ((value >= 61) && (value <= 120))
        {
            hideAllProducts();
            showProduct(2);
        }
        else if ((value >= 121) && (value <= 180))
        {
            hideAllProducts();
            showProduct(3);
        }
        else if ((value >= 181) && (value <= 360))
        {
            hideAllProducts();
            showProduct(4);
        }
        else if ((value >= 361) && (value <= 580))
        {
            hideAllProducts();
            showProduct(5);
        }
        else if ((value >= 581) && (value <= 780))
        {
            hideAllProducts();
            showProduct(6);
        }
        else if ((value >= 781) && (value <= 980))
        {
            hideAllProducts();
            showProduct(7);
        }
        else if ((value >= 981) && (value <= 1180))
        {
            hideAllProducts();
            showProduct(8);
        }
        else if ((value >= 1181) && (value <= 1380))
        {
            hideAllProducts();
            showProduct(9);
        }
        else if ((value >= 1381) && (value <= 1580))
        {
            hideAllProducts();
            showProduct(10);
        }
        else if ((value >= 1581) && (value <= 1780))
        {
            hideAllProducts();
            showProduct(11);
        }
        else if ((value >= 1781) && (value <= 1980))
        {
            hideAllProducts();
            showProduct(12);
        }
        else if ((value > 1981))
        {
            hideAllProducts();
            showProduct(13);
        }
        else {
            hideAllProducts();
            showProduct(1);
        }

    }

    function hideAllProducts()
    {
        $("#Product25").hide();
        $("#Product1").hide();
        $("#Product2").hide();
        $("#Product3").hide();
        $("#Product4").hide();
        $("#Product5").hide();
        $("#Product6").hide();
        $("#Product7").hide();
        $("#Product8").hide();
        $("#Product9").hide();
        $("#Product10").hide();
        $("#Product11").hide();
        $("#Product12").hide();
        $("#Product13").hide();
    }

    function showProduct(productId)
    {
        var product = "#Product" + productId;
        $(product).show();
    }

</script>

0 个答案:

没有答案