javascript - UIslider 按钮不适用于复选框过滤器-6ren

javascript - UIslider 按钮不适用于复选框过滤器

转载作者：行者123 更新时间：2023-12-03 01:16:29

我尝试找出如何强制 slider 的按钮移动它而不是正常滑动，但保持复选框过滤器仍然以正确的方式工作。

当我设置按钮来移动 slider 时，过滤器无法按应有的方式工作。当我将 slider 代码从:值:[10000]更改为:值:10000时，问题就出现了。

这是我的代码和 jsfiddle 示例，其中过滤器正常工作但按钮不起作用(该示例中只有 slider +复选框过滤有效，以显示我需要如何过滤产品)。 https://jsfiddle.net/7er9sxzq/

我正在寻求任何帮助以使其发挥作用。

CSS:

body { font-family:'Arial'; color:#646464; }        
    .continents-wrap { float:left; width:20%; margin:0 5% 0 0; padding:0; }     
    .tabela-wrap { float:left; width:50%; margin:0 5% 0 0; padding:0; position:relative; }  
    .tabela { float:left; width:50%; }
    .tabela div { float:left; width:90%; height:68px; line-height:68px; padding:0 5%; background:#eee; margin:0 0 1px; position:relative; } 
    .number {font-size:12px;}


.ui-slider {
position: relative;
text-align: left;
}
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 1.2em;
height: 1.2em;
cursor: default;
}
.ui-slider .ui-slider-range {
position: absolute;
z-index: 1;
font-size: .7em;
display: block;
border: 0;
background-position: 0 0;
}
.ui-slider-horizontal {
height: .8em;

}
.ui-slider-horizontal .ui-slider-handle {
top: -0.5em;
margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
top: 0;
height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
right: 0;
}
.ui-slider-vertical {
width: .8em;
height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
left: -.3em;
margin-left: 0;
margin-bottom: -.6em;
}
.ui-slider-vertical .ui-slider-range {
left: 0;
width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
top: 0;
}
.ui-widget-content {
    border: 1px solid #aaaaaa;
    background: white 50% 50% repeat-x;
    color: #222222;
}
.ui-widget {
    font-family: Verdana,Arial,sans-serif;
    font-size: 1.1em;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    width: 30px;
    height: 30px;
    border: 3px solid #2F3D44;
    border-radius: 20px;
    background: white 50% 50% repeat-x;
    font-weight: normal;
    color: #555555;
}
.slider1Hide {
display: none;
}
.sliderButtons {
  width: 200px;
  height: 30px;
  border: 1px solid #ccc;
}

HTML:

<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>



<input type="text" id="amount" readonly >
<div class="slider" id="price" ></div><br>
<div class="sliderButtons" step="500">+ Increase</div>
<div class="sliderButtons" step="-500">- Decrease</div>

<br><br>
            <div class="tabela-wrap">   
                    <label style="number"><input type="checkbox" name="fl-1" value="1" id="1" /> 1</label>
                    <label style="number"><input type="checkbox" name="fl-2" value="2" id="2" /> 2</label>
                    <label style="number"><input type="checkbox" name="fl-3" value="3" id="3" /> 3</label>
                    <label style="number"><input type="checkbox" name="fl-4" value="4" id="4" /> 4</label>
                    <label style="number"><input type="checkbox" name="fl-5" value="5" id="5" /> 5</label>
                    <label style="number"><input type="checkbox" name="fl-6" value="6" id="6" /> 6</label>
                    <label style="number"><input type="checkbox" name="fl-7" value="7" id="7" /> 7</label>
                    <label style="number"><input type="checkbox" name="fl-8" value="8" id="8" /> 8</label> 
            </div>

            <br><br>

           <ul class="tabela lokata" id="products">
                <li class="tabelki" data-price="10000" data-category="1 2 3 4 ">10 000 USD contains 1 2 3 4</li>
                <li class="tabelki" data-price="12000" data-category="2 3">12 000 USD contains 2 3</li>
                <li class="tabelki" data-price="13000" data-category="4 5">13 000 USD contains 4 5</li>
                <li class="tabelki" data-price="14000" data-category="5 6 ">14 000 USD contains 5 6</li>
                <li class="tabelki" data-price="12000" data-category="5">12 000 USD contains 5</li>
                <li class="tabelki" data-price="14000" data-category="1 2">14 000 USD contains 1 2</li>
                <li class="tabelki" data-price="16000" data-category="1 2 3">16 000 USD contains 1 2 3</li>
                <li class="tabelki" data-price="20000" data-category="7 8">20 000 USD contains 7 8</li>

            </ul>

          <div class="tabela-wrap">  
            <label id="found"></label>
          </div>

JS:

var mySlider;

function filterPrice(products) {
  let minP = $("#price").slider("values", 0);
  let maxP = $("#price").slider("values", 1);
  return products.filter(function() {
    let value = parseInt($(this).data("price"), 10);
    return !(value > maxP || value < minP);
  });
}

function filterCheckboxes(products) {
  checkboxes = $("input:checked").filter(function() {
    return $.inArray($(this).attr("name"), ['fl-1', 'fl-2', 'fl-3', 'fl-4', 'fl-5', 'fl-6', 'fl-7', 'fl-8']) != -1;
  }).map(function() {
    return this.value;
  });


  if (checkboxes.length == 0) {
    return products;
  }

  return products.filter(function() {
    categories = $(this).data("category").toString().split(" ");
    let val = true;
    checkboxes.each(function() {
      if (!categories.includes(this[0])) {
        val = false;
        return;
      }
    });
    return val;
  });

}

function filterProducts() {
  products = $("#products li");
  products.hide();
  products = filterPrice(products);
  products = filterCheckboxes(products);
  products.show();

  let numItems = products.length;

  if (numItems > 0) {
    label = "We found " + numItems + " offers.";
  } else {
    label = "No results";
  }

  $("#found").text(label);
}

$(function() {
  let options = {
    min: 500,
    max: 100000,
    step: 500,
    values: [10000], // If changed to  value: 10000, other filters does not work
    slide: function(event, ui) {
      $("#amount").val(ui.value + " USD");
    },
    change: function(event, ui) {
      filterProducts();
    }
  };

  $("input").filter(function() {
    return $.inArray($(this).attr("name"), ['fl-1', 'fl-2', 'fl-3', 'fl-4', 'fl-5', 'fl-6', 'fl-7', 'fl-8']) != -1;
  }).change(filterProducts);

  mySlider = $("#price").slider(options); 
  $("#amount").val(mySlider.slider("value") + " USD");

});


$('.sliderButtons').click(function() {
  var step = +$(this).attr("step"); 
  mySlider.slider("option", "value", mySlider.slider("value") + step);
  $("#amount").val(mySlider.slider("value") + " USD");
});

最佳答案

这是预期的功能吗？

$(document).ready(function(){
  // cache ref to all checkbox elements
  var checkboxes = $('input:checkbox'),
      // cache ref to results
      results = $('#results'),
      // cache ref to our list
      listItems = $('.tabela > li'),
      // cache amount ref
      amount = $('#amount'),
      // collection of selected checkbox elements
      selectedItems = [],
      // slider config
      slideOptions = {
        min: 500,
        max: 100000,
        step: 500,
        values: [10000],
        slide: function(event, ui) {
          amount.val(ui.values[0] + " USD");
        },
        change: function(event, ui) {
          updateList();
        }
      };
      
  // render our slider      
  var slider = $("#price").slider(slideOptions);
  
  amount.val($("#price").slider("values", 0) + " USD");
  
  checkboxes.on('change', function(){
    var id = this.id;

    if(this.checked){
      // push the element vs the value
      selectedItems.push(this.value);
    }else{
      // remove items on uncheck
      selectedItems.splice(selectedItems.indexOf(this.value), 1);
    }

    updateList();
  });

  var updateList = function(){
    // create map of values for joining
    var selectedItemsValues = selectedItems.sort().join(' '),
        // min value
			  minPrice = slider.slider('values', 0);
    
    // filter list items         
    listItems.hide().filter(function(){
      // get data attributes
      var data = this.dataset;
      // restrict list to price band and selections
      return Number(data.price) >= minPrice && (selectedItems.length ? data.category.includes(selectedItemsValues) : true);
    })
    .show();

    // count visible li only
    var total = $('.tabela li:visible').length;

    if(total === 0){
      results.html('We did not find any matches.');
    }else{
      results.html('We found ' + total + (total === 1 ? ' match' : ' matches' ) + '!');
    }
  }
  
  $('.sliderButtons').click(function() {
    var step = Number(this.dataset.step),
        value = slider.slider('values')[0];
        
      value += step;

      slider.slider('values', 0, value);

      amount.val(value + " USD");

      updateList();
  });
});

.ui-slider {
  position: relative;
  text-align: left;
}
.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 1.2em;
  height: 1.2em;
  cursor: default;
}
.ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  font-size: .7em;
  display: block;
  border: 0;
  background-position: 0 0;
}
.ui-slider-horizontal {
  height: .8em;

}
.ui-slider-horizontal .ui-slider-handle {
  top: -0.5em;
  margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
  left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
  right: 0;
}
.ui-slider-vertical {
  width: .8em;
  height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
  left: -.3em;
  margin-left: 0;
  margin-bottom: -.6em;
}
.ui-slider-vertical .ui-slider-range {
  left: 0;
  width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
  bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
  top: 0;
}
.ui-widget-content {
  border: 1px solid #aaaaaa;
  background: white 50% 50% repeat-x;
  color: #222222;
}
.ui-widget {
  font-family: Verdana,Arial,sans-serif;
  font-size: 1.1em;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  width: 30px;
  height: 30px;
  border: 3px solid #2F3D44;
  border-radius: 20px;
  background: white 50% 50% repeat-x;
  font-weight: normal;
  color: #555555;
}
.slider1Hide {
  display: none;
}

<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>

<input type="text" id="amount" readonly>

<div class="slider" id="price"></div><br>

<button class="sliderButtons" data-step="500">+ Increase</button>
<button class="sliderButtons" data-step="-500">- Decrease</button>

<br><br>

<div class="tabela-wrap">   
  <label for="1"><input type="checkbox" name="fl-1" value="1" id="1" /> 1</label>
  <label for="2"><input type="checkbox" name="fl-2" value="2" id="2" /> 2</label>
  <label for="3"><input type="checkbox" name="fl-3" value="3" id="3" /> 3</label>
  <label for="4"><input type="checkbox" name="fl-4" value="4" id="4" /> 4</label>
  <label for="5"><input type="checkbox" name="fl-5" value="5" id="5" /> 5</label>
  <label for="6"><input type="checkbox" name="fl-6" value="6" id="6" /> 6</label>
  <label for="7"><input type="checkbox" name="fl-7" value="7" id="7" /> 7</label>
  <label for="8"><input type="checkbox" name="fl-8" value="8" id="8" /> 8</label> 
</div>

<br><br>

<ul class="tabela lokata" id="products">
  <li class="tabelki" data-price="10000" data-category="1 2 3 4 ">10 000 USD contains 1 2 3 4</li>
  <li class="tabelki" data-price="12000" data-category="2 3">12 000 USD contains 2 3</li>
  <li class="tabelki" data-price="13000" data-category="4 5">13 000 USD contains 4 5</li>
  <li class="tabelki" data-price="14000" data-category="5 6 ">14 000 USD contains 5 6</li>
  <li class="tabelki" data-price="12000" data-category="5">12 000 USD contains 5</li>
  <li class="tabelki" data-price="14000" data-category="1 2">14 000 USD contains 1 2</li>
  <li class="tabelki" data-price="16000" data-category="1 2 3">16 000 USD contains 1 2 3</li>
  <li class="tabelki" data-price="20000" data-category="7 8">20 000 USD contains 7 8</li>
</ul>

<div id="results"></div>

关于javascript - UIslider 按钮不适用于复选框过滤器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51992696/

文章推荐： javascript - 链式事件范围，是否可以访问根对象？

文章推荐： javascript - 查找隐藏的父元素 jQuery

文章推荐： javascript - 如何解决 audio.play() 的问题？

按钮
所以我有这个 javascript 片段，它有两个按钮可以进入全屏，一个按钮可以退出全屏。我想做到这一点，如果我不在全屏模式下，按钮会显示转到全屏模式，而当我处于全屏模式时，按钮会显示退出全屏模式..
c# - 隐藏可扩展属性的省略号 (...) 按钮，例如属性网格中字体属性的 "…"按钮
我在自定义控件中添加了一个新属性作为可扩展属性，例如属性网格中的字体属性。在 Windows 窗体应用程序项目中使用我的自定义控件后，我在属性网格中看到一个省略号 (…) 按钮，如字体属性的“…”按钮
c# - 隐藏可扩展属性的省略号 (...) 按钮，例如属性网格中字体属性的 "…"按钮
我在自定义控件中添加了一个新属性作为可扩展属性，例如属性网格中的字体属性。在 Windows 窗体应用程序项目中使用我的自定义控件后，我在属性网格中看到一个省略号 (…) 按钮，如字体属性的“…”按钮
javascript - “给我发推文”按钮 - JavaScript 按钮
我尝试将 Twitter 上的“Tweet Me”按钮 ( http://twitter.com/goodies/tweetbutton ) 添加到我的网站。然而，每当按下按钮时，我都会收到此 Jav
javascript - html - <输入类型=按钮> 和 <按钮>
我试图在我的文本区域中获取一个按钮值，如果我使用则工作正常但如果我使用那么它就不起作用了。你能找出问题所在吗？ HTML 1 2 3 4 JavaScript $(document).read
c# - 如何根据调用方法的调用(按钮)发送者(按钮#)操作变量名称？
我的 C# Winform 面板中有一堆文本框。每行文本框的命名如下: tb1 tbNickName1 comboBox1 tb2 tbNickName2 comboBox2 tb3 tbNickNa
javascript - 隐藏 'Clear' 按钮，直到单击 'Apply' 按钮
我有一个表单，其中过滤器下方有按钮(应用过滤器和清除过滤器)，我试图在单击“应用”按钮时显示“清除”，并在单击“清除”按钮时隐藏“清除”按钮。下面的代码(如果我的表有的话):
javascript - 我有一个 Excel 按钮，我想在数据表中添加 pdf 按钮
excel 按钮正在工作，但是当我添加 pdf 按钮时，它添加仅显示 pdf 按钮 excel 按钮在 pdf 按钮添加后隐藏 $(document).ready(function() { $
html - 将标题分为移动应用程序的 3 列(按钮、标题、按钮)
我想创建一个 div 作为标题并分成 3 列，并按以下顺序在其中放置 2 个按钮和一个标题:Button1(左位) Title(居中) Button2(右位) 这是我为这个 div 编写的代码:
javascript - 即使有一个框未选中，如何禁用“允许”按钮？仅当选中所有复选框时才应启用“允许”按钮？
仅当选中所有框时才应禁用“允许”按钮。我该怎么做？我已经完成了 HTML 部分，如下所示。如何执行其中的逻辑部分？即使未选中一个复选框，也应禁用“允许”按钮
php - 在我的网站中开发“点赞”按钮，而不是添加 Facebook“点赞”按钮
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关
java - 在 JSF2 中呈现 HTML5 按钮(按钮、重置和提交)
如您所知，您可以使用 2 种方法在 HTML5 中呈现按钮: 使用 void 元素或如果您需要内容，请使用元素(不是空元素)。在JSF2中，有2种方式生成按钮；与UICommand或 UIOu
jquery - 如果隐藏字段值更改，则应启用“保存”按钮。如果输入相同的值，则应再次禁用“保存”按钮
我尝试根据表单元素的更改禁用/启用保存按钮。但是，当通过弹出按钮选择更改隐藏输入字段值时，保存按钮不受影响。下面是我的代码。我正在尝试序列化旧的表单值并与更改后的表单值进行比较。但我猜隐藏的字段值无
android - 如何使用 ActionDone 按钮(不带 Enter 按钮)实现多行 EditText
我有用于在消息(电子邮件、短信)上输入内容的 EditText。我希望在单击 ActionDone 按钮时立即发布消息。我为此使用以下代码: message.setOnEditorActionList
android - 如何禁用 EditText 软件键盘上的 "Next"按钮(替换为 "Done"按钮)
我的 Android 应用程序中有一堆 EditText，每个都将 InputMethod 设置为 numberSigned。我的目标设备没有硬件键盘，而是使用软件键盘输入数字。 Android 将输
java - 无法以编程方式隐藏弧形菜单中的 fab 按钮。尝试了 upload.hide();无法弄清楚如何隐藏 fab 按钮
我无法以编程方式隐藏弧形菜单中的 fab 按钮。我正在使用https://github.com/saurabharora90/MaterialArcMenu在我的代码中。如何在Java中以编程方式隐藏
java - 有没有办法在 JOptionPane showInputDialog 中只有 OK 按钮(没有 CANCEL 按钮)？
我已经看到这在其他类型的对话框窗口中是可能的，例如“showConfirmDialog”，其中可以指定按钮的数量及其名称；但是使用“showInputDialog”时是否可以实现相同的功能？我似乎无法
java - 如何通过 Selenium 和 Java 单击“停用”按钮，然后单击“激活”按钮
相同的按钮用于激活和停用。第一次，当代码运行按钮单击并成功“停用”时。但第二次，代码无法找到该元素。第一个案例按钮位于第二个“a”标签中，然后停用第一个“a”标签中的按钮。案例1: Edit
JavaScript 按钮
是否可以将按钮的 onclick 操作设置为 JavaScript 变量？这个想法是我们用 JavaScript 控制一个表。每当点击该表的一行时，我们就会更新一个 JavaScript 变量。该 v
android自定义控件(按钮)
我想创建一个按钮，它包含左侧的文本和右侧的复选框(或任何其他组件)。我怎样才能做到这一点？我发现我可以制作自己的 View extends Button，但是如果可以的话我应该如何实现 onDraw

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - UIslider 按钮不适用于复选框过滤器