时间戳

首页 > 解决方案 > 我如何从 jquery 的过滤器栏中获取下限值和上限值

javascript - 我如何从 jquery 的过滤器栏中获取下限值和上限值

问题描述

如何从此过滤器中获取下限值和上限值以在数据库中进行搜索？这是我在我的网站上使用的过滤器栏的图片。

在此处输入图像描述

这是该过滤器栏的 Html 代码。

<div class="filter-price p-t-22 p-b-50 bo3">
  <div class="m-text15 p-b-17">
    Price
  </div>
  <div class="wra-filter-bar">
    <div id="filter-bar" id="value">
    </div>
  </div>
  <div class="flex-sb-m flex-w p-t-16">
    <div class="w-size11">
      <!-- Button -->
      <button class="flex-c-m size4 bg7 bo-rad-15 hov1 s-text14 trans-0-4" class='filter'>
        Filter
      </button>
    </div>
    <div class="s-text3 p-t-10 p-b-10">
      Range: $
      <span id="value-lower">610
      </span> - $
      <span id="value-upper">980
      </span>
    </div>
  </div>
</div>

这是用于此的 JQuery 代码Filter Bar。

<script type="text/javascript">
  /*[ No ui ]
        ===========================================================*/
  var filterBar = document.getElementById('filter-bar');
  noUiSlider.create(filterBar, {
    start: [ 100, 2000 ],
    connect: true,
    range: {
      'min': 100,
      'max': 2000
    }
  }
                   );
  var skipValues = [
    document.getElementById('value-lower'),
    document.getElementById('value-upper')
  ];
  filterBar.noUiSlider.on('update', function( values, handle ) {
    skipValues[handle].innerHTML = Math.round(values[handle]) ;
  }
);
</script>

标签： javascriptjquery

解决方案

如果您使用的软件来自这里，那么它只是说您需要发出 get 命令，对于您来说，它是这样的：

filterBar.noUiSlider.get();

由于您使用的是范围，因此 get 应该返回一个数组。如果您不使用该软件，请告诉我。

更新：这是一种做你想做的事情的方法，按钮从滑块中获取值。请注意，我必须更改按钮的标记，因为您有两个类属性，所以我将 class='filter' 更改为 id='filter'

  var filterBar = document.getElementById('filter-bar');
  noUiSlider.create(filterBar, {
    start: [ 100, 2000 ],
    connect: true,
    range: {
      'min': 100,
      'max': 2000
    }
  });
  var skipValues = [
    document.getElementById('value-lower'),
    document.getElementById('value-upper')
  ];
  filterBar.noUiSlider.on('update', function( values, handle ) {
    skipValues[handle].innerHTML = Math.round(values[handle]) ;
  });
  
  $("button#filter").click(function () {
      var filterBar = document.getElementById('filter-bar');
      var vals = filterBar.noUiSlider.get();
      console.log(vals);
  });
<script src="https://refreshless.com/nouislider/distribute/nouislider.js"></script>
<link href="https://refreshless.com/nouislider/distribute/nouislider.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="filter-price p-t-22 p-b-50 bo3">
  <div class="m-text15 p-b-17">
    Price
  </div>
  <div class="wra-filter-bar">
    <div id="filter-bar" id="value">
    </div>
  </div>
  <div class="flex-sb-m flex-w p-t-16">
    <div class="w-size11">
      <!-- Button -->
      <button class="flex-c-m size4 bg7 bo-rad-15 hov1 s-text14 trans-0-4" id='filter'>
        Filter
      </button>
    </div>
    <div class="s-text3 p-t-10 p-b-10">
      Range: $
      <span id="value-lower">610
      </span> - $
      <span id="value-upper">980
      </span>
    </div>
  </div>
</div>

如果您使用的软件来自这里，那么它只是说您需要发出 get 命令，对于您来说，它是这样的：

filterBar.noUiSlider.get();

由于您使用的是范围，因此 get 应该返回一个数组。如果您不使用该软件，请告诉我。

推荐阅读