Question

我正在尝试通过使用在codepen上找到的scriopt来根据您选择的类别来过滤div。我之前从未使用过jquery，所以我不明白什么是错的，但是当我在codepen上尝试我的脚本时，它可以工作。但是当我通过打开html文件在我的浏览器中运行它时，它不起作用！对不起，如果这是一个noob问题，但我不明白为什么它不起作用！如果有人能帮助我理解我做错了什么，我会非常感激！

codepen的代码：

HTML：

<html>
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script type="text/javascript" src="sort.js"></script>
    <link rel="stylesheet" href="main.css" type="text/css"/>

    </head>
<body>
    <div>

                        <button class="active btn" data-filter="box">Show All</button>
                        <button class="btn" data-filter="a">Show A</button>
                        <button class="btn" data-filter="b">Show B</button>
                        <button class="btn" data-filter="c">Show C</button>
                        <button class="btn" data-filter="d">Show D</button>

                        <div class="spacer"></div>

                        <div id="parent">
                          <div class="box a b">A &amp; B</div>
                          <div class="box a">A</div>
                          <div class="box b">B</div>
                          <div class="box c a">C &amp; A</div>
                          <div class="box c">C</div>
                          <div class="box d">D</div>
                        </div>
                <br class="clear" />

    </div>
</body>
</html>

的CSS：

    * {
  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;
}

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

js：

var $boxs = $("#parent > .box");
var $btns = $(".btn").on("click", function() {

  var active = 
    $btns.removeClass("active")
      .filter(this)
      .addClass("active")
      .data("filter");

  $boxs
    .hide()
    .filter( "." + active )
    .fadeIn(450);

});

Answer 1

您需要在加载DOM后运行脚本（，因为您将文件包含在head 中）

$(function(){
    var $boxs = $("#parent > .box");
    var $btns = $(".btn").on("click", function() {

      var active = 
        $btns.removeClass("active")
          .filter(this)
          .addClass("active")
          .data("filter");

      $boxs
        .hide()
        .filter( "." + active )
        .fadeIn(450);
    });
});

此代码也不需要包含 jQuery-UI （<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>）..

Answer 2

代码工作正常。在线代码编辑器通常将代码包装在load事件处理程序（，如本答案中的堆栈代码）中，以确保它在元素创建后运行。

尝试将代码包装在ready处理程序中：

$(document).ready(function(){
  var $boxs = $("#parent > .box");
  var $btns = $(".btn").on("click", function() {

    var active =
      $btns.removeClass("active")
      .filter(this)
      .addClass("active")
      .data("filter");

    $boxs
      .hide()
      .filter("." + active)
      .fadeIn(450);

  });

});

var $boxs = $("#parent > .box");
var $btns = $(".btn").on("click", function() {

  var active =
    $btns.removeClass("active")
    .filter(this)
    .addClass("active")
    .data("filter");

  $boxs
    .hide()
    .filter("." + active)
    .fadeIn(450);

});

* {
  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;
}
.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="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<div>

  <button class="active btn" data-filter="box">Show All</button>
  <button class="btn" data-filter="a">Show A</button>
  <button class="btn" data-filter="b">Show B</button>
  <button class="btn" data-filter="c">Show C</button>
  <button class="btn" data-filter="d">Show D</button>

  <div class="spacer"></div>

  <div id="parent">
    <div class="box a b">A &amp; B</div>
    <div class="box a">A</div>
    <div class="box b">B</div>
    <div class="box c a">C &amp; A</div>
    <div class="box c">C</div>
    <div class="box d">D</div>
  </div>
  <br class="clear" />

</div>

Answer 3

您正在使用旧版本的jQuery。用户jQuery 2.x并在身体标记后添加以下行。

<script type="text/javascript" src="sort.js"></script>

用jquery过滤div

3 个答案: