Question

我试图用复选框制作一个过滤器。我尝试了很多使用jQuery和JavaScript的方法，但没有使用它们。

这是html文件：

 <form class="size-form">
            <input type="checkbox" name="min50" class="cb-hide 50e"> меньши 50.000€ <br>
            <input type="checkbox" name="50-100" class="cb-hide 100e"> 50.000€-100.000€ <br>
            <input type="checkbox" name="100-150" class="cb-hide 150e"> 100.000€-150.000€ <br>
            <input type="checkbox" name="150-200" class="cb-hide 200e"> 150.000€-200.000€ <br>
            <input type="checkbox" name="200-300" class="cb-hide 300e"> 200.000€-300.000€ <br>
            <input type="checkbox" name="50-100" class="cb-hide over300e">    более 300.000€ <br>
 </form>
 <div class="menu">
  <div class="hot-offer p150 s150-200 beograd ">
      <div class="img-and-price">
          <img class="img" src="img/noimg.png" width="280px" height="220px">
      </div>

      <h4 class="offer-location">grad-opstina-ulica</h4>
      <p class="price">90000€</p>
      <p class="size">90m<sup>2</sup></p>
  </div>

   <div class="hot-offer">
     <div class="img-and-price">
         <img class="img" src="img/noimg.png" width="280px" height="220px">
     </div>

       <h4 class="offer-location">grad-opstina-ulica</h4>
       <p class="price">90000€</p>
       <p class="size">90m<sup>2</sup></p>
  </div>

  <div class="hot-offer">
     <div class="img-and-price">
         <img class="img" src="img/noimg.png" width="280px" height="220px">
     </div>
        <h4 class="offer-location">grad-opstina-ulica</h4>
        <p class="price">90000€</p>
        <p class="size">90m<sup>2</sup></p>
  </div>
 </div>

这是我得到的最接近的，但它仍然没有像计划那样工作。我正在尝试填充，所以如果没有复选框：选中，则会显示所有.hot-offer div。但是当一个特定的复选框被选中时，例如.150e，我的html文件只会显示链接到该框的div。

这是我的jQuery脚本：

$(function () {
    $(".cb-hide").click(function () {
        if ($(this).is(":checked")) {
            $(".hot-offer").hide();
        } else {
            $(".hot-offer").show();
        }
    });
});

$(function () {
    $(".cb-hide").click(function () {
        if ($(this).is(":checked")) {
            $(".p150-200").show();
        } else {
            $(".p150-200").hide();
        }
    });
});

Answer 1

我认为这就像你想要的那样：

$(function () {
    $( 'input:checkbox' ).click( function( e ) {
      var name = $( this ).prop( 'name' );
      var offerClass = '.hot-offer.s' + name ;
      console.log( 'offerClass: ' + offerClass );
      $( '.hot-offer' ).hide();
      if ( $( this ).prop( 'checked' ) === true ){
        $( offerClass ).show();
      }

      var anyChecked = false;
      $( 'input' ).each( function() {
        if ($( this ).prop( 'checked' ) === true ) {
          anyChecked = true;
        }
      });
      if( anyChecked === false ) {
        $( '.hot-offer' ).show();
      }
    });


})();

我确信它可以更优雅，但我很累。

请点击此处：http://codepen.io/SteveClason/pen/qNdMPR

Answer 2

我建议设置value复选框以匹配div的id

<input type="checkbox" class="cb-hide" value="offer-1">
<div id="offer-1" class="hot-offer></div>

然后使用toggle()方法隐藏/显示

$('.cb-hide').change(function(){
    $('#'+ this.value).toggle(this.checked);   
});

传递给toggle()的布尔值告诉它是隐藏还是显示元素

如何使用复选框来制作过滤器？

2 个答案: