Question

我是这里的新人。很高兴见到你。我希望你能问一下我自己无法解决的问题。

我正在尝试使用UI Range Sliders对一些数据进行排序。我想先排序价格，然后当项目排序时，我想根据质量对它们进行排序。但有一个问题。当第一次排序操作正确完成后，第二次排序操作不起作用。我无法找出我的代码有什么问题。我是JS的新手。我还没有找到任何答案。我正在使用JQuery和UI。

请帮忙。

   Exit: (10) delete(a, [3, a, b, c, d], [3, b, c, d]) ? creep
   Exit: (9) delete(a, [2, 3, a, b, c, d], [2, 3, b, c, d]) ? creep
   Exit: (8) delete(a, [1, 2, 3, a, b, c, d], [1, 2, 3, b, c, d]) ? creep
X = [1, 2, 3, b, c, d] .

和脚本：

<p>
<label for="amount">Price</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
<div class="slider" id="price"></div>
</p>

<p>
<label for="amount2">Quality</label>
<input type="text" id="amount2" readonly style="border:0; color:#f6931f; font-weight:bold;">
<div class="slider" id="quality"></div>
</p>

<ul id="products">
<li data-price="10" data-quality="1"> product - 10 zł q1</li>
<li data-price="50" data-quality="3"> product - 50 zł q3</li>
<li data-price="100" data-quality="6"> product - 100 zł q6</li>
<li data-price="150" data-quality="12"> product - 150 zł q12</li>
<li data-price="200" data-quality="24"> product - 200 zł q24</li>
</ul>

Answer 1

问题是修改一个滑块是删除另一个滑块添加的类。要使其工作，您需要在滑块移动后启动两个更新。

所以，这就是我为使其发挥作用所做的工作：
我将两个showProducts()函数合并为只有一个，没有参数恢复每个滑块的最小值和最大值并用于过滤我还创建了一个data_filter()函数来简化过滤，并避免重复代码。

这是一个片段：

＆＃13;

// Added this function
function data_filter(mini, maxi, data_name){
  $("#products li").filter(function() {
    var value = parseInt($(this).data(data_name), 10);
    if (value > maxi || value < mini) {
      $(this).addClass('slider1Hide');
    }
  });
}

function showProducts() {
  // Reset filters
  $("#products li").removeClass('slider1Hide');
  // Price
  var minP = $("#price").slider("values", 0);
  var maxP = $("#price").slider("values", 1);
  data_filter(minP, maxP, "price"); // Call the new function
  // Quality
  var minQ = $("#quality").slider("values", 0);
  var maxQ = $("#quality").slider("values", 1);
  data_filter(minQ, maxQ, "quality"); // Call the new function
}

// Below here, there's no change    

$(function() {
  var options = {
    range: true,
    min: 1,
    max: 36,
    step: 1,
    values: [3, 24],
    slide: function(event, ui) {
      $("#amount2").val(ui.values[0] + " - " + ui.values[1]);
    },
    change: function(event, ui) {
      showProducts();
    }

  };

  $("#quality").slider(options);
  $("#amount2").val($("#quality").slider("values", 0) +
    " - " + $("#quality").slider("values", 1));
});


$(function() {
  var options = {
    range: true,
    min: 0,
    max: 250,
    step: 1,
    values: [100, 200],
    slide: function(event, ui) {
      $("#amount").val(ui.values[0] + " zł - " + ui.values[1] + " zł");
    },
    change: function(event, ui) {
      showProducts();
    }

  };

  $("#price").slider(options);
  $("#amount").val($("#price").slider("values", 0) +
    " zł - " + $("#price").slider("values", 1) + " zł");
});

＆＃13;

.slider1Hide {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<div><!-- DIV here, no P -->
  <label for="amount">Price</label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
  <div class="slider" id="price"></div>
</div><!-- DIV here, no P -->

<div><!-- DIV here, no P -->
  <label for="amount2">Quality</label>
  <input type="text" id="amount2" readonly style="border:0; color:#f6931f; font-weight:bold;">
  <div class="slider" id="quality"></div>
</div><!-- DIV here, no P -->

<ul id="products">
  <li data-price="10" data-quality="1"> product - 10 zł q1</li>
  <li data-price="50" data-quality="3"> product - 50 zł q3</li>
  <li data-price="100" data-quality="6"> product - 100 zł q6</li>
  <li data-price="150" data-quality="12"> product - 150 zł q12</li>
  <li data-price="200" data-quality="24"> product - 200 zł q24</li>
</ul>

＆＃13;

希望它有所帮助。

如何使用两个Ui Range Sliders对相同的数据进行排序

1 个答案: