teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

コードを追加する

2018/01/24 06:59

投稿

rettmb125
rettmb125

スコア8

title CHANGED
File without changes
body CHANGED
@@ -3,9 +3,74 @@
3
3
 
4
4
  そこで、下記の記事を見つけてhammer.jsを使おうと考えております。(https://qiita.com/coa00@github/items/dc1aa5fedd8e4ed8b1ff#%E3%82%B3%E3%83%BC%E3%83%89)
5
5
 
6
- hammer.jsをサーバーにアップロードして<script>タグでファイルを読み込んだ後に、utility.jsという別ファイルに上記記事のコードをコピペしてい
6
+ hammer.jsをサーバーにアップロードして<script>タグでファイルを読み込んだ後に、utility.jsという別ファイルにのコードを書きした
7
7
 
8
+
9
+
10
+ ```javascript
11
+
12
+ jQuery.noConflict();
13
+ (function($) {
14
+
15
+ var duringAnimation = false;//アニメーション中のロック用フラグ
16
+ var mc = new Hammer(document.getElementById("swiper")); **エラー部分**
17
+
18
+ mc.on("pan", function(e){
19
+ var viewItem = $(e.target).closest(".view-mode");
20
+ var positions = $(".position > li");
21
+ var index = $(viewItem).index();
22
+ var length = $(".view-mode").length;
23
+ var nextItem;
24
+
25
+ var nextIndex;
26
+ var direction;
27
+ var range = 60;//判定する角度
28
+ var easing = 'ease';
29
+
30
+ if (e.distance < 70) return true;
31
+
32
+ //範囲外だったら処理しない。
33
+ if ( !(e.angle > -180 - range && e.angle < -180 + range) && !(e.angle < range && e.angle > -range)){
34
+ return true;
35
+ }
36
+
37
+ //方向
38
+ direction = (e.additionalEvent === "panleft") ? "left":"right";
39
+
40
+ var step = (direction === "left") ? 1:-1;
41
+ nextIndex = index + step;
42
+
43
+ if (nextIndex > length-1)
44
+ {
45
+ nextIndex = 0;
46
+ }else if (nextIndex < 0){
47
+ nextIndex = length-1;
48
+ }
49
+
50
+ nextItem = $(".view-mode")[nextIndex];
51
+
52
+
53
+ $(positions).removeClass("active");
54
+ $(positions[nextIndex]).addClass("active");
55
+
56
+ //$("#position ul").animate({left: 0}, 100, "easeOutExpo");
57
+ $(window).scrollTop(0);
58
+
59
+ if (duringAnimation === false) {
60
+ duringAnimation = true;
61
+ $(nextItem).css({"left":"100%", "display":"block"}).transition({left: "0"}, 300, easing);
62
+ $(viewItem).transition({left: (direction === "left") ? "-100%":"100%" }, 300, easing,function () {
63
+ $(viewItem).css({"position": "absolute", "display": "none"});
64
+ $(nextItem).css({"margin-top": "0", "position": "relative", "display": "block"});
65
+ duringAnimation = false;
66
+ });
67
+ }
68
+ });
69
+
70
+ })(jQuery); **エラー部分**
71
+
72
+ ```
8
73
  すると『Uncaught ReferenceError: Hammer is not defined』という内容のエラーが出ます。
9
- エラーが出ている場所はコピペした『var mc = new Hammer(document.getElementById('swiper'));』と、もともと自分で書いていた『(function($) {』閉じカッコに当たる『})(jQuery);』の部分です。
74
+ エラーが出ている場所は、5行目の『var mc = new Hammer(document.getElementById('swiper'));』と、最後行の『})(jQuery);』の部分です。
10
75
 
11
76
  原因が分からなくて困っているのですが、どなたか原因や解決策に心当たりのある方はいらっしゃらないでしょうか。