Question

我试图合并价格slidefilter - 但是现在它隐藏了具有price data属性的元素。我想定位父元素并隐藏它。如何使脚本在父级上工作但仍使用子级数据属性？

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);
});

Answer 1

你可以

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 />

Answer 2

尝试此修改：

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() }); }

价格slidefilter - 隐藏属性元素parent

2 个答案: