Question

我目前正在将价格滑块http://www.showstyle.lu/homme/与http://theme-lookz-responsive.webshopapp.com/en/designer/上的价格滑块进行比较，如果您在我们的主页（ShowStyle）上拖动过滤器，您可以在滤镜下看到最小值和最小值的数字值。最大不要动态更新，即你必须猜测滑块的位置，并希望它降价。

在示例网站上：如果您拖动价格过滤器min＆amp;最大值会动态更新，以便更轻松地查看您的设置。

我尝试比较两个过滤器价格框的代码并查看了他们实施的这个额外脚本，但无法弄清楚是否是造成它的原因，我认为这是任何想法如何重新制定到我的模板？两者都使用相同的CMS，因此允许使用此代码，这只是一个舒适的更新。我设法调整了代码但不明白我是否应该替换＆＃34; ui＆＃34;带有price-filter-range或min / max语法的语法。

原始剧本

Lazy<T>

0/20值取决于您所在的页面，因此我认为根据当前目录页面上的最高价格项目，它也需要是动态的

非常感谢任何帮助，非常感谢！

Answer 1

试试这个：

$("#collection-filter-price").slider({
  range: true,
  min: 0,
  max: 750,
  values: [$('#filter_form_min').val(), $('#filter_form_max').val()],
  step: 1,
  slide: function( event, ui){
    $('.price-filter-range .min span').text(ui.values[0]);
    $('.price-filter-range .max span').text(ui.values[1]);
  },
  stop: function(event, ui){
    $('#filter_form_min').val(ui.values[0]);
    $('#filter_form_max').val(ui.values[1]);
    $('#filter_form').submit();
  }
});

请注意，由于误解，此代码（在我的回答中）已从原始代码更新。我还重新编辑了它以修复因包含此代码而破坏的功能。

编辑：我刚注意到您的网站已包含JS代码

  $(function(){
    $('#filter_form input, #filter_form select').change(function(){
      $(this).closest('form').submit();
    });

    $("#collection-filter-price").slider({
      range: true,
      min: 0,
      max: 750,
      values: [0, 520],
      step: 1,
      slide: function( event, ui){
    $('.sidebar-filter-range .min span').html(ui.values[0]);
    $('.sidebar-filter-range .max span').html(ui.values[1]);

    $('#filter_form_min').val(ui.values[0]);
    $('#filter_form_max').val(ui.values[1]);
  },
    stop: function(event, ui){
    $('#filter_form').submit();
  }
    });
  });

然而，这段代码是由服务器动态生成的（注意520是如何嵌入到脚本中的）......它不起作用的唯一原因是因为它期望类名是{ {1}}代替sidebar-filter-range。如果您可以进行正确的修改以使其指向正确的元素，那么它应该可以正常工作。

动态更新价格滑块

1 个答案: