我在尝试创建产品展示时遇到了问题。这是我的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>