文章/答案/技术大牛

发布

社区首页 >问答首页 >如何从这个ui滑块中删除第二个句柄？

问如何从这个ui滑块中删除第二个句柄？
EN

Stack Overflow用户

提问于 2020-10-05 00:02:55

回答 1查看 28关注 0票数 0

所以我使用两个单独的滑块创建了这个过滤器，每个滑块有3个数据点。根据手柄在滑块上的位置，每个组合将显示不同的卡。这个函数似乎工作正常，但我意识到我可能在不需要第二个手柄的时候使用了多范围滑块。有没有办法去掉它？

HTML

<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"o/>
</head>
<body>
<h3>How much THC?</h3>
  <div class="slider thc-slider" id="price"></div>
  <h4 class="left">HIGH</h4>
  <h4 class="right">LOW</h4><br><br><br>
<h3>How much CBD?</h3>
  <div class="slider" id="quality"></div>
  <h4 class="left">HIGH</h4>
  <h4 class="right">LOW</h4>
<ul id="products">
  <li class="card-hidden" data-price="20" data-quality="20">Unwind</li>
  <li class="card-hidden" data-price="20" data-quality="10">Gentle</li>
  <li class="card-hidden" data-price="20" data-quality="0">Soothe</li>
  <li class="card-hidden" data-price="10" data-quality="20">Uplift</li>
  <li class="card-hidden" data-price="10" data-quality="10">Balanced</li>
  <li class="card-hidden" data-price="10" data-quality="0">Relax</li>
  <li class="card-hidden" data-price="0" data-quality="20">Fly</li>
  <li class="card-hidden" data-price="0" data-quality="10">Euphoria</li>
  <li data-price="0" data-quality="0">SLOW</li>
</ul>
</body>
</html>

Javascript

     $('#products').removeClass('card-hidden');
 });
    
    function showProducts(minP, maxP, minQ, maxQ) {
    $("#products li").filter(function() {
        var price = parseInt($(this).data("price"), 10);
        var quality = parseInt($(this).data("quality"), 10);
        if(price >= minP && price <= maxP && quality >= minQ && quality <= maxQ){
             $(this).show();
        } else {
             $(this).hide();
        }
    });
}


$(function() {
    var options = {
        hidden: true,
        range: true,
        min: 0,
        max: 20,
        step: 10,
        values: [0,20],
        change: function(event, ui) {
            var minP = $("#price").slider("values", 0);
            var maxP = $("#price").slider("values", 0);
            var minQ = $("#quality").slider("values", 0);
            var maxQ = $("#quality").slider("values", 0);
            showProducts(minP, maxP, minQ, maxQ);
        }
    };

    $("#price").slider(options);
    $("#quality").slider(options);

});

这是jsfiddle链接：https://jsfiddle.net/dhzwkjx1/2/

如果有什么我能做的，请告诉我！

javascript

css

filter

slide

uislider

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-10-05 00:21:50

如果您希望其中一个滑块只有一个手柄，则应使用固定的最大/最小值

     $(function () {
     $('#products').removeClass('card-hidden');
 });
    
    function showProducts(minP, maxP, minQ, maxQ) {
    $("#products li").filter(function() {
        var price = parseInt($(this).data("price"), 10);
        var quality = parseInt($(this).data("quality"), 10);
        if(price >= minP && price <= maxP && quality >= minQ && quality <= maxQ){
             $(this).show();
        } else {
             $(this).hide();
        }
    });
}


$(function() {
    var options1 = {
        hidden: true,
        range: 'max',
        min: 0,
        max: 20,
        step: 10,
        values: 0,
        change: function(event, ui) {
            var minP = $("#price").slider("values", 0);
            var maxP = $("#price").slider("values", 0);
            var minQ = $("#quality").slider("values", 0);
            var maxQ = $("#quality").slider("values", 0);
            showProducts(minP, maxP, minQ, maxQ);
        }
    };
    var options2 = {
        hidden: true,
        range: 'min',
        min: 0,
        max: 20,
        step: 10,
        values: 20,
        change: function(event, ui) {
            var minP = $("#price").slider("values", 0);
            var maxP = $("#price").slider("values", 0);
            var minQ = $("#quality").slider("values", 0);
            var maxQ = $("#quality").slider("values", 0);
            showProducts(minP, maxP, minQ, maxQ);
        }
    };
    var options3 = {
        hidden: true,
        range: 'max',
        min: 0,
        max: 20,
        step: 10,
        values: [0,20],
        change: function(event, ui) {
            var minP = $("#price").slider("values", 0);
            var maxP = $("#price").slider("values", 0);
            var minQ = $("#quality").slider("values", 0);
            var maxQ = $("#quality").slider("values", 0);
            showProducts(minP, maxP, minQ, maxQ);
        }
    };
    $("#price").slider(options1);
    $("#quality").slider(options2);              $("#both").slider(options3);



});

h3 {
  color: #333 !important;
  font-size: 22px;
  text-align: center;
}
h4{
  color: #333 !important;
  font-size: 18px;
  font-weight: 500;
}
.left {
  float: left;
}
.right {
  float: right;
}
.card-hidden {
  display: none;
}
#products li{
  margin-top: 80px;
  font-size: 30px;
  list-style: none;
  color: red;
}

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"o/>


<h3>How much THC?</h3>
  <div class="slider thc-slider" id="price"></div>
  <h4 class="left">HIGH</h4>
  <h4 class="right">LOW</h4><br><br><br>
<h3>How much CBD?</h3>
  <div class="slider" id="quality"></div>
  <h4 class="left">HIGH</h4>
  <h4 class="right">LOW</h4>
<h3>Two handles</h3>
  <div class="slider" id="both"></div>
  <h4 class="left">HIGH</h4>
  <h4 class="right">LOW</h4>
<ul id="products">
  <li class="card-hidden" data-price="20" data-quality="20">Unwind</li>
  <li class="card-hidden" data-price="20" data-quality="10">Gentle</li>
  <li class="card-hidden" data-price="20" data-quality="0">Soothe</li>
  <li class="card-hidden" data-price="10" data-quality="20">Uplift</li>
  <li class="card-hidden" data-price="10" data-quality="10">Balanced</li>
  <li class="card-hidden" data-price="10" data-quality="0">Relax</li>
  <li class="card-hidden" data-price="0" data-quality="20">Fly</li>
  <li class="card-hidden" data-price="0" data-quality="10">Euphoria</li>
  <li data-price="0" data-quality="0">SLOW</li>
</ul>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64196881

复制

相似问题

问如何从这个ui滑块中删除第二个句柄？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从这个ui滑块中删除第二个句柄？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从这个ui滑块中删除第二个句柄？
EN