社区所有版块导航
Python
python开源   Django   Python   DjangoApp   pycharm  
DATA
docker   Elasticsearch  
aigc
aigc   chatgpt  
WEB开发
linux   MongoDB   Redis   DATABASE   NGINX   其他Web框架   web工具   zookeeper   tornado   NoSql   Bootstrap   js   peewee   Git   bottle   IE   MQ   Jquery  
机器学习
机器学习算法  
Python88.com
反馈   公告   社区推广  
产品
短视频  
印度
印度  
Py学习  »  Jquery

如何从jquery中的筛选栏获取上下值

Soldeir X • 4 年前 • 251 次点击  

enter image description here

这是过滤器栏的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>
Python社区是高质量的Python/Django开发社区
本文地址:http://www.python88.com/topic/52918
 
251 次点击  
文章 [ 1 ]  |  最新文章 4 年前
Doug F
Reply   •   1 楼
Doug F    5 年前

如果您使用的软件来自 here 然后它只是说您需要发出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>

如果您使用的软件来自 在这里

filterBar.noUiSlider.get();

因为您使用的是一个范围,所以get应该返回一个数组。如果你不用那个软件,告诉我。