回答編集履歴
1
おまけ追加
answer
CHANGED
|
@@ -1,4 +1,9 @@
|
|
|
1
|
+
aの要素をクリックしたらAのページへ画面遷移。
|
|
2
|
+
bの要素をクリックしたらBのページへ画面遷移。
|
|
3
|
+
|
|
4
|
+
「Aの要素をクリックしたら、Bのページへ画面遷移」そのものの一連の流れは共通ですね。
|
|
1
5
|
この程度の差なら配列やオブジェクトを使えば共通化できますね。
|
|
6
|
+
オブジェクトの配列を作って解決しましょうか。
|
|
2
7
|
|
|
3
8
|
```JavaScript
|
|
4
9
|
var link_settings = [
|
|
@@ -20,4 +25,42 @@
|
|
|
20
25
|
}
|
|
21
26
|
});
|
|
22
27
|
});
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
---
|
|
31
|
+
|
|
32
|
+
おまけ: 実行したい内容そのものを分岐させる
|
|
33
|
+
|
|
34
|
+
JavaScriptは引数やオブジェクトに関数を持たせられるので、
|
|
35
|
+
やりたいことをオブジェクトなんかに持たせておく解決法もあります。
|
|
36
|
+
|
|
37
|
+
今回はtoUrlを関数を返す関数に作り変えて実装してみました。
|
|
38
|
+
仮引数としてpathを記憶させておいて、次の実行で画面遷移するように仕込んであります。
|
|
39
|
+
|
|
40
|
+
また、cの処理が画面遷移さえすれば良いと解釈してこんな風にしてみました。
|
|
41
|
+
過ぎた抽象化は読みづらくなる原因ですが、使いこなせば良いソースコードを書けるようになりますので、色々試してみてください。
|
|
42
|
+
|
|
43
|
+
```JavaScript
|
|
44
|
+
var toUrl = function(path) {
|
|
45
|
+
return function(e) {
|
|
46
|
+
// C処理
|
|
47
|
+
location.href = "https:xxx" + url
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
var link_settings = [
|
|
51
|
+
{selector: "#aBtn", touchend: toUrl("/aaa")},
|
|
52
|
+
{selector: "#bBtn", touchend: toUrl("/bbb")},
|
|
53
|
+
{selector: "#cBtn", touchend: toUrl("/ccc")},
|
|
54
|
+
]
|
|
55
|
+
link_settings.forEach(function(it) {
|
|
56
|
+
$(it.selector).on({
|
|
57
|
+
'touchstart': function(e) {
|
|
58
|
+
// A処理
|
|
59
|
+
},
|
|
60
|
+
'touchmove': function(e) {
|
|
61
|
+
// B処理
|
|
62
|
+
},
|
|
63
|
+
'touchend': it.touchend
|
|
64
|
+
});
|
|
65
|
+
});
|
|
23
66
|
```
|