价格滑动过滤器-隐藏父属性元素

Price slidefilter - hide the attribute elements parent

本文关键字：隐藏 属性 元素 过滤器      更新时间：2023-09-26

我试图合并一个价格滑动过滤器，但现在它隐藏了带有价格数据属性的元素。我希望以父元素为目标并将其隐藏。如何使脚本在父级上工作，但仍使用子级的数据属性？

HTML:

<div class="itembox centerbox"> 
    <div class="priceinfo col5" data-price="119">€119</div> 
</div>

脚本：

function showProducts(minPrice, maxPrice) {
    $(".priceinfo.col5").hide().filter(function() {
        var price = parseInt($(this).data("price"), 10);
        return price >= minPrice && price <= maxPrice;
    }).show();
}
$(function() {
    var options = {
        range: true,
        min: 0,
        max: 500,
        values: [50, 300],
        slide: function(event, ui) {
            var min = ui.values[0],
            max = ui.values[1];
            $("#amount").val("$" + min + " - $" + max);
            showProducts(min, max);
        }
    }, min, max;
    $("#slider-range").slider(options);
    min = $("#slider-range").slider("values", 0);
    max = $("#slider-range").slider("values", 1);
    $("#amount").val("$" + min + " - $" + max);
    showProducts(min, max);
});

您可以

function showProducts(minPrice, maxPrice) {
  $('.itembox:has(.priceinfo.col5)').hide().filter(function() {
    var price = parseInt($(this).find('.priceinfo.col5').data("price"), 10);
    return price >= minPrice && price <= maxPrice;
  }).show();
}
$(function() {
  var options = {
      range: true,
      min: 0,
      max: 500,
      values: [50, 300],
      slide: function(event, ui) {
        var min = ui.values[0],
          max = ui.values[1];
        $("#amount").val("$" + min + " - $" + max);
        showProducts(min, max);
      }
    },
    min, max;
  $("#slider-range").slider(options);
  min = $("#slider-range").slider("values", 0);
  max = $("#slider-range").slider("values", 1);
  $("#amount").val("$" + min + " - $" + max);
  showProducts(min, max);
});
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<div class="itembox centerbox">
  <div class="priceinfo col5" data-price="119">€119</div>
</div>
<div class="itembox centerbox">
  <div class="priceinfo col5" data-price="100">€100</div>
</div>
<div class="itembox centerbox">
  <div class="priceinfo col5" data-price="150">€150</div>
</div>
<div class="itembox centerbox">
  <div class="priceinfo col5" data-price="200">€200</div>
</div>
<div id="slider-range"></div>
<br />
<input id="amount" readonly />

尝试此修改：

function showProducts(minPrice, maxPrice) { // hide all parent divs of .priceinfo.col5 divs // by hiding the parent you hide children as well $(".priceinfo.col5").each(function() { $(this).parent().hide() }); // show the parent of every data-price item that passes the filter test $(".priceinfo.col5").filter(function() { var price = parseInt($(this).data("price"), 10); return price >= minPrice && price <= maxPrice; }).each(function() { $(this).parent.show() }); }

相关文章：