动态更新价格滑块

Question

我目前正在比较我们的价格滑块 http://www.showstyle.lu/homme/ 和 http://theme-lookz-responsive.webshopapp.com/en/designer/ 上的价格滑块，如果您在我们的主页 (ShowStyle) 上拖动过滤器，您可以在过滤器下看到，最小值和最大值的数值不会动态更新，即您必须猜测在哪里放开滑块并希望它能够达到价格。

在示例网站上：如果您拖动价格过滤器，最小值和最大值会动态更新，从而更容易查看您的设置。

我尝试比较两个过滤器价格框的代码，并看到了他们实现的这个附加脚本，但无法弄清楚这是否是导致它的原因，我认为它是但知道如何在我的模板上重新制定它吗？两者都使用相同的 CMS，因此允许使用此代码，这只是一个舒适的更新。我设法调整了代码，但不明白是否应该用 price-filter-range 或 min/max 语法替换“ui”语法。

原文

<script type="text/javascript">
$(function(){
  $('#filter_form input, #filter_form select').change(function(){
    $(this).closest('form').submit();
  });

  $("#collection-filter-price").slider({
    range: true,
    min: 0,
    max: 20,
    values: [0, 20],
    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();
    }
  });
});

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 是如何嵌入到脚本中的）...它不起作用的唯一原因是因为它期望类名是 sidebar-filter-range 而不是 price-filter-range。如果您可以进行正确的修改以使其指向正确的元素，那么它应该可以工作。