Question

只是有点卡住我知道如何使用jQuery显示和隐藏div，我无法找到的一件事是如何隐藏和显示基于数值的div。

以下是我的代码的一个小例子：

<div class="makes MERCEDES-BENZ" style="display: block;">
  <div class="listing-container">
    <h3 class="price-listing">£10,989</h3>
  </div>
    <ul class="overwrite-btstrp-ul">
      <li value="49695">Mileage: 49,695</li>
    </ul>
</div>

正如您所看到的，这个HTML包含一个带有＆＃39; price-listing＆＃39;类的h3，我想显示和隐藏div的类别＆＃39;制作＆＃39;根据＆＃39;价格上市＆＃39; div包含表单过滤的值。只是你知道有一个列表，这些＆＃39; make＆＃39;在我的页面上使用不同的值进行div。

对我来说，我目前有这种形式：

<form class="car-finder-container" method="GET" action="used-cars.php">
    <select class="form-control select-box price-min">
        <option value="min-price">Min price</option>
        <option value="0">£0</option>
        <option value="500">£500</option>
        ...
    </select>
    <select class="form-control select-box price-max">
        <option value="max-price">Max price</option>
        <option value="0">£0</option>
        <option value="500">£500</option>
        ...
    </select>
</form>

所以第一个选择元素是隐藏h3中数值小于所选选项的值。

第二个选择元素是隐藏任何值高于所选数值选项的h3。

如果需要的话，我可以给价格一个价值，就像我在第一个例子中的li一样。

有人能告诉我一个关于如何做到这一点的代码示例吗？感谢。

Answer 1

 <select id="priceMax" class="form-control select-box price-max">
            <option value="max-price">Max price</option>
            <option value="0">£0</option>
            <option value="500">£500</option>
        </select>

<select id="priceMin" class="form-control select-box price-min">
        <option value="min-price">Min price</option>
        <option value="0">£0</option>
        <option value="500">£500</option>
    </select>





$("#priceMax").change(function () {
        var limit = $(this).val();
        var h3Arr = $("h3");

        h3Arr.each(function () {

            if (parseInt($(this).text().substring(1, $(this).text().length).replace(/,/g, '')) > parseInt(limit)) {
                $(this).closest("div[class='makes MERCEDES-BENZ']").hide();
            }else
            {
                $(this).closest("div[class='makes MERCEDES-BENZ']").show();
            }
        })
    })



 $("#priceMin").change(function () {
                var limit = $(this).val();
                var h3Arr = $("h3");

                h3Arr.each(function () {

                    if (parseInt($(this).text().substring(1, $(this).text().length).replace(/,/g, ''))<parseInt(limit)) {
                        $(this).closest("div[class='makes MERCEDES-BENZ']").hide();
                    }else
                    {
                        $(this).closest("div[class='makes MERCEDES-BENZ']").show();
                    }
                })
            })

Answer 2

你可以尝试：

$('select').change(function () {
    var min = $('select.price-min').val();
    var max = $('select.price-max').val();
    $('div.makes').show();
    $('h3.price-listing').filter(function () {
        var price = +$(this).text().substring(1).replace(',', '');
        if (price < min || price > max) return true;
    }).closest('div.makes').hide();
})

$('select').change(function () {
    var min = $('select.price-min').val();
    var max = $('select.price-max').val();
    $('div.makes').show();
    $('h3.price-listing').filter(function () {
        var price = +$(this).text().substring(1).replace(',', '');
        if (price < min || price > max) return true;
    }).closest('div.makes').hide();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form class="car-finder-container" method="GET" action="used-cars.php">
    <select class="form-control select-box price-min">
        <option value="min-price">Min price</option>
        <option value="0">£0</option>
        <option value="500">£500</option>
        <option value="1000">£1,000</option>
        <option value="1500">£1,500</option>
        <option value="2000">£2,000</option>
        <option value="2500">£2,500</option>
        <option value="3000">£3,000</option>
        <option value="3500">£3,500</option>
        <option value="4000">£4,000</option>
        <option value="4500">£4,500</option>
        <option value="5000">£5,000</option>
        <option value="5500">£5,500</option>
        <option value="6000">£6,000</option>
        <option value="6500">£6,500</option>
        <option value="7000">£7,000</option>
        <option value="7500">£7,500</option>
        <option value="8000">£8,000</option>
        <option value="8500">£8,500</option>
        <option value="9000">£9,000</option>
        <option value="9500">£9,500</option>
        <option value="10000">£10,000</option>
        <option value="11000">£11,000</option>
        <option value="12000">£12,000</option>
        <option value="13000">£13,000</option>
        <option value="14000">£14,000</option>
        <option value="15000">£15,000</option>
        <option value="16000">£16,000</option>
        <option value="17000">£17,000</option>
        <option value="18000">£18,000</option>
        <option value="19000">£19,000</option>
        <option value="20000">£20,000</option>
        <option value="22500">£22,500</option>
        <option value="25000">£25,000</option>
        <option value="27500">£27,500</option>
        <option value="30000">£30,000</option>
        <option value="35000">£35,000</option>
        <option value="40000">£40,000</option>
        <option value="45000">£45,000</option>
        <option value="50000">£50,000</option>
        <option value="55000">£55,000</option>
        <option value="60000">£60,000</option>
        <option value="65000">£65,000</option>
        <option value="70000">£70,000</option>
        <option value="75000">£75,000</option>
        <option value="100000">£100,000</option>
        <option value="250000">£250,000</option>
        <option value="500000">£500,000</option>
    </select>
    <select class="form-control select-box price-max">
        <option value="max-price">Max price</option>
        <option value="0">£0</option>
        <option value="500">£500</option>
        <option value="1000">£1,000</option>
        <option value="1500">£1,500</option>
        <option value="2000">£2,000</option>
        <option value="2500">£2,500</option>
        <option value="3000">£3,000</option>
        <option value="3500">£3,500</option>
        <option value="4000">£4,000</option>
        <option value="4500">£4,500</option>
        <option value="5000">£5,000</option>
        <option value="5500">£5,500</option>
        <option value="6000">£6,000</option>
        <option value="6500">£6,500</option>
        <option value="7000">£7,000</option>
        <option value="7500">£7,500</option>
        <option value="8000">£8,000</option>
        <option value="8500">£8,500</option>
        <option value="9000">£9,000</option>
        <option value="9500">£9,500</option>
        <option value="10000">£10,000</option>
        <option value="11000">£11,000</option>
        <option value="12000">£12,000</option>
        <option value="13000">£13,000</option>
        <option value="14000">£14,000</option>
        <option value="15000">£15,000</option>
        <option value="16000">£16,000</option>
        <option value="17000">£17,000</option>
        <option value="18000">£18,000</option>
        <option value="19000">£19,000</option>
        <option value="20000">£20,000</option>
        <option value="22500">£22,500</option>
        <option value="25000">£25,000</option>
        <option value="27500">£27,500</option>
        <option value="30000">£30,000</option>
        <option value="35000">£35,000</option>
        <option value="40000">£40,000</option>
        <option value="45000">£45,000</option>
        <option value="50000">£50,000</option>
        <option value="55000">£55,000</option>
        <option value="60000">£60,000</option>
        <option value="65000">£65,000</option>
        <option value="70000">£70,000</option>
        <option value="75000">£75,000</option>
        <option value="100000">£100,000</option>
        <option value="250000">£250,000</option>
        <option value="500000">£500,000</option>
    </select>
</form>
<div class="makes MERCEDES-BENZ" style="display: block;">
    <div class="listing-container">
         <h3 class="price-listing">£15,989</h3>

    </div>
    <ul class="overwrite-btstrp-ul">
        <li value="49695">Mileage: 49,695</li>
    </ul>
</div>
<div class="makes MERCEDES-BENZ" style="display: block;">
    <div class="listing-container">
         <h3 class="price-listing">£10,989</h3>

    </div>
    <ul class="overwrite-btstrp-ul">
        <li value="49695">Mileage: 49,695</li>
    </ul>
</div>
<div class="makes MERCEDES-BENZ" style="display: block;">
    <div class="listing-container">
         <h3 class="price-listing">£25,989</h3>

    </div>
    <ul class="overwrite-btstrp-ul">
        <li value="49695">Mileage: 49,695</li>
    </ul>
</div>

Answer 3

以下代码适用于您的要求。

$(".price-min").change(function(){
    var selVal = $(this).val();
    $("h3.price-listing").filter(function(){
    if(selVal > parseInt($(this).html().replace(',','').replace('£',''))){
        $(this).closest('.makes').hide();
    }
        });
    });


$(".price-max").change(function(){
    var selVal = $(this).val();
   $("h3.price-listing").filter(function(){
    if(selVal < parseInt($(this).html().replace(',','').replace('£',''))){
        $(this).closest('.makes').hide();
    }
});
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="makes MERCEDES-BENZ" style="display: block;">
  <div class="listing-container">
    <h3 class="price-listing">£10,989</h3>
  </div>
    <ul class="overwrite-btstrp-ul">
      <li value="49695">Mileage: 49,695</li>
    </ul>
</div>

<form class="car-finder-container" method="GET" action="used-cars.php">
    <select class="form-control select-box  price-min">
        <option value="min-price">Min price</option>
        <option value="0">£0</option>
        <option value="500">£500</option>
        <option value="300">£300</option>
        <option value="100">£100</option>
        <option value="10000">£10,000</option>
        <option value="11000">£11,000</option>    </select>
    <select class="form-control select-box price-max">
        <option value="max-price">Max price</option>
        <option value="0">£0</option>
        <option value="500">£500</option>
        <option value="300">£300</option>
        <option value="100">£100</option>
        <option value="10000">£10,000</option>
        <option value="11000">£11,000</option>
    </select>
</form>

http://jsfiddle.net/e1g0dwsb/2/

基于两个选择元素以数字方式隐藏div

3 个答案: