jQueryが動作しない

前提・実現したいこと

自サイトの機能拡張に伴いJqueryを導入したいです。
ひとまず入れたいjsは下記ＵＲＬサイトのものです。

発生している問題・エラーメッセージ

クリックで動作が起きるjsなのですが、クリックしても無反応です。
サイトのデモでは想定通り動いており、それをコピペしたのでソース間違いという事はないと思うので、そもそもjQueryの導入に失敗している？と思うのですが、その間違いを見つけられません。

<head>内でDLしてきた最新のjquery-3.4.1.min.jsを読み込めば導入は完了ではないのでしょうか？

該当のソースコード

HTMl
1<head>
2<link href="css/Shuffle.css" rel="stylesheet">
3<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script> 
4<script type="text/javascript" src="js/Shuffle.js"></script> 
5</head>
6
7<body>
8<!-- Page Content -->
9<section class="wrap">
10  <div class="container">
11    <div class="wrap">
12      <div class="row">
13        <div class="col">
14          <ul id="btn">
15	<li data-group="all" class="active alpha">ALL</li>
16	<li data-group="red" class="alpha">RED</li>
17	<li data-group="blue" class="alpha">BLUE</li>
18	<li data-group="green" class="alpha">GREEN</li>
19	<li data-group="yellow" class="alpha">YELLOW</li>
20</ul>
21<ul id="animationList">
22	<li data-groups='["red"]'><span class="red">RED</span></li>
23	<li data-groups='["yellow"]'><span class="yellow">YELLOW</span></li>
24	<li data-groups='["blue"]'><span class="blue">BLUE</span></li>
25	<li data-groups='["green"]'><span class="green">GREEN</span></li>
26	<li data-groups='["green"]'><span class="green">GREEN</span></li>
27	<li data-groups='["yellow"]'><span class="yellow">YELLOW</span></li>
28	<li data-groups='["blue"]'><span class="blue">BLUE</span></li>
29	<li data-groups='["red"]'><span class="red">RED</span></li>
30	<li data-groups='["red"]'><span class="red">RED</span></li>
31	<li data-groups='["blue"]'><span class="blue">BLUE</span></li>
32	<li data-groups='["yellow"]'><span class="yellow">YELLOW</span></li>
33	<li data-groups='["green"]'><span class="green">GREEN</span></li>
34</ul>
35        </div>
36      </div>
37    </div>
38  </div>
39</section>
40
41<!-- Bootstrap core JavaScript --> 
42<script src="vendor/jquery/jquery.min.js"></script> 
43<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
44</body>
45

CSS
1#btn {
2	overflow: hidden;
3	margin-bottom: 40px;
4}
5
6#btn li {
7	float: left;
8	margin: 10px;
9	cursor: pointer;
10}
11
12#animationList {
13	overflow: hidden;
14}
15
16#animationList li {
17	width: 220px;
18	height: 220px;
19	padding: 10px;
20	float: left;
21	color: #fff;
22}
23
24#animationList li span {
25	display: block;
26	width: 180px;
27	height: 180px;
28	padding: 20px;
29}

js
1	$(function() {
2		$('#btn li').on('click', function() {
3			var $this = $(this),
4				$grid = $('#animationList');
5				
6			$('#btn .active').removeClass('active');
7			$this.addClass('active');
8			$grid.shuffle($this.data('group'));
9		});
10		
11		$('#animationList').shuffle({
12			group: 'all',
13			speed: 700,
14			easing: 'ease-in-out'
15		});
16	});
17

試したこと

他バージョンのjQueryの導入やCDNも試してみましたが結果は変わりませんでした。

補足情報（FW/ツールのバージョンなど）

Bootstrap4
jquery-3.4.1
GoogleChrome75.0.3770.100

m.ts10806

2019/07/08 05:16

なぜ「間違っている」と思われたのでしょうか。理由を質問本文に追記してください。

m.ts10806

2019/07/08 05:17

タイトルももう少し「起きている問題」に寄せられたほうが良いと思います。

行動規範の内容に同意します

回答2件

ベストアンサー

追記修正依頼はしていますが（それはそれでご対応いただくとして）

コードだけ見て2点気になるところを挙げておきます。

jQueryの本体ファイル2つを共存させるのはかなり至難の業と思います。ほとんどは1つだけです。機能がバッティングしてエラーとなる可能性が高いです。（ブラウザデベロッパツールのコンソールを確認してみてください。）
minを読み込むのでしたらおおよそ本体jsファイルに改修を入れることはないと思うので、自身のサーバに設置するのではなくCDNのほうが良いと思います。(これはBootstrapも同様)

投稿2019/07/08 05:21

m.ts10806

総合スコア80850

take_19

2019/07/08 05:32

ご指摘ありがとうございます。 2つというのは<body>最下部のBootstrapCoreのjQueryですよね。これはBootstrapの動作に影響を考えて放置しておりました。消しても特に問題なさそうなので消しておこうと思います。初めはCDNで読み込んでいたのですが、それで動作しなかったので試しにDLしたjsを読み込むようにしています。こちらも結果変わらないので戻そうと思います。

m.ts10806

2019/07/08 05:48

ブラウザデベロッパツールでエラー確認してください。読み込むjQueryの問題ではないと思います

m.ts10806

2019/07/08 06:01

どちらかというと「jQueryが動作しない」というタイトルは正しくなくて「組んだコードが想定通り動作しない」のだと思います。エラーが出ていないのでしたら、「想定通り動くように組まれていない」ということになります。

行動規範の内容に同意します

activeの付替えをするなら.activeクラスをcssで指示してあげてください

javascript
1<style>
2.active{
3color:red;
4}
5</style>
6<script>
7$(function(){
8  $('#btn li').on('click', function() {
9    $('#btn li').not($(this)).removeClass('active');
10    $(this).toggleClass('active');
11  });
12});
13</script>