Question

我正在尝试使用JQuery过滤页面内容。该页面显示了几个不同科目的课程，这些科目也具有学校成绩（幼儿园，小学，中学和高中）的属性。

最初，我只需按主题进行过滤，但我现在需要实施一种按等级过滤的方法。

这是我的Codepin：https://codepen.io/anon/pen/Omejdv

我很容易通过以下JQuery显示/隐藏div class“grade”：

var $btns = $('.btn').click(function() {
  if (this.id == 'all') {
    $('#parent > div').fadeIn(450);
  } else {
    var $el = $('.' + this.id).fadeIn(450);
    $('#parent > div').not($el).hide();
  }
  $btns.removeClass('active');
  $(this).addClass('active');
})

但是，我尝试添加“成绩”过滤器会重新显示所有成绩项目而不保留之前选择的“主题”。

Answer 1

我已更改您的代码以解决问题

$('.btn, .grade-sel').click(function() {
  var c = $(this).attr("class");
  $("." + c).removeClass("active");
  $(this).addClass("active");
  var id = $("button.active").map(function() {
    return $(this).attr("id");
  });
  console.clear();
  if ($.inArray("all-grades", id) > -1 && $.inArray("all", id) > -1) {
    $("#parent div").show()
  } else if ($.inArray("all-grades", id) > -1) {
    $("#parent div:not(." + id[0] + ")").hide();
    $("#parent div." + id[0]).show();
  } else if ($.inArray("all", id) > -1) {
    $("#parent div:not(." + id[1] + ")").hide();
    $("#parent div." + id[1]).show();
  } else {

    $("#parent div:not(." + id[0] + "." + id[1] + ")").hide();
    $("#parent div." + id[0] + "." + id[1]).show();
  }

})

* {
  box-sizing: border-box;
}

body {
  padding: 10px;
  background: #ecf0f1;
  font-family: helvetica, sans-serif;
  font-weight: 200;
}

.btn {
  border: none;
  background: linear-gradient(to bottom, #3498db, #2980b9);
  border-radius: 3px;
  font-family: Arial;
  color: #ffffff;
  padding: 5px 10px 5px 10px;
  text-decoration: none;
  margin: 5px;
}

.grade-sel {
  border: none;
  background: linear-gradient(to bottom, #3498db, #2980b9);
  border-radius: 3px;
  font-family: Arial;
  color: #ffffff;
  padding: 5px 10px 5px 10px;
  text-decoration: none;
  margin: 5px;
}

.active {
  background: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

.box {
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  padding: 10px;
  height: 100px;
  width: calc(25% - 10px);
  float: left;
  margin: 5px;
  text-align: center;
  border-radius: 3px;
  color: #fff;
}

.spacer {
  clear: both;
  height: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="active btn" id="all">Show All</button>
<button class="btn" id="math">Math</button>
<button class="btn" id="science">Science</button>
<button class="btn" id="history">History</button>
<button class="btn" id="english">English</button>

<div class="spacer"></div>

<button class="active grade-sel" id="all-grades">All Grades</button>
<button class="grade-sel" id="kinder">Kindergarten</button>
<button class="grade-sel" id="elementary">Elementary</button>
<button class="grade-sel" id="middle">Middle</button>
<button class="grade-sel" id="high">High</button>
<div class="spacer"></div>

<div id="parent">
  <div class="box math science kinder elementary middle high">Math and science K-12</div>
  <div class="box science kinder">Kindergarten science</div>
  <div class="box math high">High School math</div>
  <div class="box history high">High School History</div>
  <div class="box english middle">Middle english</div>
  <div class="box math english elementary">Elementary Math & English</div>
  <div class="box history english kinder">Kindergarten History & english</div>
  <div class="box english science middle high">Middle & High english & science</div>
</div>

JQuery隐藏了尚未隐藏的父级Div

1 个答案: