Question

因为我在我的角度应用程序中使用了数据过滤器，所以它不再起作用。

JS文件：

var $mediaElements = $('.glossarytag');
$('.filterbutton').click(function(e){
e.preventDefault();
var filterVal = $(this).data('filter');

if(filterVal === 'all'){
  $mediaElements.show();
}else{
   $mediaElements.hide().filter('.' + filterVal).show();
}
});

主文件：

 <font color="white">Filter by:</font> <br>
           <button type="button" class="btn btn-default btn-sm filterbutton"  data-filter="all">Show All</button>
           <button ng-repeat="t in problems" type="button" class="btn btn-primary btn-sm filterbutton" data-filter="{{t.PROBLEM_TAG}}">{{t.PROBLEM_TAG}}</button>

  <tr ng-repeat="t in problems" class="glossarytag {{t.PROBLEM_TAG}}">
                    <td style="vertical-align: middle; text-align: center"> <button type="button" class="btn btn-primary btn-sm"data-toggle="modal" data-target="#{{t.PROBLEM_ID}}">Show details</button></td>
                    <th style="vertical-align: middle; text-align: center" scope="row">{{t.PROBLEM_ID}}</th>
                    <td style="padding-right: 15px;">{{t.PROBLEM_SYMPTOMS}}</td>
                    <td></td>
                    </td>
                </tr>

也许我没有看到问题，但是我找不到任何错误：/指向JS文件的链接是正确的。

也许链接的顺序？

<script src="../assets/js/lib/jquery-2.1.3.min.js"></script>
<script src="../assets/js/jquery.mousewheel.min.js"></script>
<script src="../assets/js/jquery.cookie.min.js"></script>
<script src="../assets/js/fastclick.min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
<script src="../assets/js/popper.min.js"></script>
<script src="../assets/js/lib/d3.min.js"></script>
<script src="../assets/js/lib/c3.min.js"></script>
<script src="../assets/js/filter.js"></script>
<script data-require="angular.js@1.2.0-rc3" data-semver="1.2.0-rc3" 
src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
<script src="../assets/angular/ticket-app.js"></script>
<script src="../assets/angular/notifications-app.js"></script>

Answer 1

您在哪里编写了用于导入外部脚本文件的<script src-=""/>标记，这意味着在<head />标记内或页面底部。如果您将其写在head标签中，则说明它无法正常工作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button type="button" class="btn btn-default btn-sm filterbutton"  data-filter="all">Show All</button>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $('.filterbutton').click(function(e){
            e.preventDefault();
            console.log($(this).data('filter'));
        })
    </script>
</body>
</html>

为什么数据过滤器对我不起作用

1 个答案: