$(elm).on({ "touchstart":function(){ this.touch = true; }, "touchmove":function(){ this.touch = false; }, "touchend":function(){ if(this.touch == true) { //処理 } } });
セレクターと処理が違う場合でも条件が同じ場合上記のようなのを毎回書くのは効率的ではないと思いまして、
function moge(elm){ if(条件) { $(elm).addClass("active"); } else { $(elm).removeClass("active"); } } moge(".box");
このように使い回したいのですがやり方がわかりません。
どのような方法がありますか?
よろしくお願いします。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答3件
0
次のどちらなのか、をはっきりさせた方が良いと思います。
- 関数単位でデータを使いまわしたい
- 要素単位でデータを使いまわしたい
関数単位 (event.data)
JavaScript
1/** 2 * 関数単位 3 */ 4jQuery(element).on('touchstart touchmove touchend', {touch: false}, function handleTouch (event) { 5 var data = event.data; 6 7 switch (event.type) { 8 case 'touchstart': 9 data.touch = true; 10 return; 11 case 'touchmove': 12 data.touch = false; 13 return; 14 case 'touchend': 15 data.touch = true; 16 // 処理 17 } 18});
要素単位 (jQuery#data)
JavaScript
1/** 2 * 要素単位 3 */ 4jQuery(element).on('touchstart touchmove touchend', function handleTouch (event) { 5 var currentTarget = jQuery(event.currentTarget); 6 7 switch (event.type) { 8 case 'touchstart': 9 currentTarget.data('touch', true); 10 return; 11 case 'touchmove': 12 currentTarget.data('touch', false); 13 return; 14 case 'touchend': 15 currentTarget.data('touch', true); 16 // 処理 17 } 18});
まとめ
簡略化する為に関数を一つにまとめましたが、独立していても構いません。
重要なのは、jQueryの次の機能を使っている事です。
jQuery#data
で要素にデータを紐づけるevent.data
で関数をデータを紐づける
jQuery をお使いのようなので、上記2つを提案しましたが、他にも選択肢があります。
Re: d__suke さん
投稿2018/05/04 11:31
編集2018/05/04 11:41総合スコア18156
0
ベストアンサー
条件を使いまわす方法
というのは、if(条件){}
の条件
の部分を色んな関数の中で使いまわしたいということでしょうか?
そういう趣旨の質問であるという前提で以下、回答いたします。
JavaScriptでは関数を他の関数の引数に渡すことも出来るし、他の関数の返り値とすることも出来ます。
条件式の使いまわしということなので、ここでは、そのお題と相性の良いArray.prototype.filter()
メソッドを用いたコードで説明してみます。
const fruits = ['apple', 'peach', 'banana', 'grape', 'watermelon']; const result = fruits.filter(function(fruit) { return fruit.includes('p'); //条件(return fruit === 'apple'とかでも良い) }); console.log(result) // [ 'apple', 'peach', 'grape' ]
まずは、Array.prototype.filter()の使い方のおさらいということで、上記のコードを置いておきます。
filter
メソッドではtrue
かfalse
を返す関数をfilter
メソッドの引数に渡す必要があるので、上記のコードでは、各フルーツ名の中にp
という文字が含まれているかどうかを判定する無名関数を渡しています。
ですが、無名関数だと使い回せないので、次のコードではこの関数を変数に入れて使っています。
const fruits = ['apple', 'peach', 'banana', 'grape', 'watermelon']; const doesContainP = function(fruit) { return fruit.includes('p'); } const result = fruits.filter(doesContainP); console.log(result) // [ 'apple', 'peach', 'grape' ]
条件判定をしてboolean
値を返す関数をこのように変数に入れたことによって、他の関数の引数にもこの条件判定をする関数を渡して使いまわす事が出来るようになりました。
ということで、今回の質問の場合も、条件判定をしてboolean
値を返す関数を作ってあげて、それを他の関数の引数に渡してあげることで、「条件を使いまわしたい」という要件を満たすことが出来ると思います。
おまけ
この回答の冒頭で、「JavaScriptでは関数を他の関数の返り値とすることも出来る」と言っていましたが、この特徴を活かすと以下のように、より条件の使いまわしがしやすくなります。
const fruits = ['apple', 'peach', 'banana', 'grape', 'watermelon']; // 関数を返す関数 const doesContainLetterOf = function(character) { return function(word) { return word.includes(character); } } // filterメソッドの引数に渡しているのは関数オブジェクト const result = fruits.filter(doesContainLetterOf('p')); // 以下のように比較させる文字を変えることも可能になる // const result = fruits.filter(doesContainLetterOf('g')); // const result = fruits.filter(doesContainLetterOf('e')); console.log(result) // [ 'apple', 'peach', 'grape' ]
投稿2018/05/04 09:44
総合スコア2415
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/05/04 11:20 編集
2018/05/04 11:28 編集
2018/05/04 11:34
2018/05/04 11:38
2018/05/04 11:45
2018/05/04 11:49
2018/05/04 11:51 編集
2018/05/04 11:53 編集
2018/05/04 14:40 編集
退会済みユーザー
2018/05/04 13:45
2018/05/04 15:02
退会済みユーザー
2018/05/04 22:10
2018/05/04 23:41
2018/05/05 00:22
0
こういうことですか??
lang=javascript
1var $box = $('.box'); 2var $grid = $('.grid') 3 4function hoge (element) { 5 if (条件) { 6 element.addClass('active'); 7 } else { 8 element.removeClass('active'); 9 } 10} 11 12hoge($box); 13hoge($grid);
投稿2018/05/04 08:16
編集2018/05/04 08:18退会済みユーザー
総合スコア0
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/05/04 15:07
2018/05/04 15:48
2018/05/04 23:44 編集
2018/05/05 00:18 編集
2018/05/05 00:23
2018/05/05 00:25
2018/05/05 00:31
2018/05/05 00:31
2018/05/05 00:36 編集
2018/05/05 01:14
2018/05/05 02:08
退会済みユーザー
2018/05/05 02:18
2018/05/05 02:29 編集
2018/05/05 02:31
退会済みユーザー
2018/05/05 02:32
2018/05/05 02:39
退会済みユーザー
2018/05/05 02:46
2018/05/05 04:42 編集