Iteratorで繰り返し関数を呼び出す方法。

Question

お世話になります。

Iteratorを使用して以下のコードが簡潔に書けないかと悩んでおります。

何か案があれば、ご教示いただけると助かります。

  {
  const click = document.getElementsByClassName('listTrigger--category'),
  on = document.getElementsByClassName('listTrigger--categoryOn')
  plusAnimation(click,on)
  }
  {
  const click = document.getElementsByClassName('listTrigger--tag'),
  on = document.getElementsByClassName('listTrigger--tagOn')
  plusAnimation(click,on)
  }
  {
  const click = document.getElementsByClassName('listTrigger--year'),
  on = document.getElementsByClassName('listTrigger--yearOn')
  plusAnimation(click,on)
  }
  {
  const click = document.getElementsByClassName('listTrigger--auther'),
  on = document.getElementsByClassName('listTrigger--autherOn')
  plusAnimation(click,on)
  }

Answer 1

イテレータに拘る理由はなさそうですが、配列もイテレータの一種ですね。

var data = [['listTrigger--category', 'listTrigger--categoryOn'], ['listTrigger--tag', 'listTrigger--tagOn'], ['listTrigger--year', 'listTrigger--yearOn'], ['listTrigger--auther', 'listTrigger--autherOn']];

for (let classList of data) {
  plusAnimation(document.getElementsByClassName(classList[0]), document.getElementsByClassName(classList[1]));
}

Re: ryuseiasa さん

Comments

[退会済みユーザー]

一番流用しやすく分かりやすいコードでしたのでBAにさせていただきました。
この度はありがとうございました。

Answer 2

Iteratorを使ってコードを簡潔にするという事なので、
１） 'listTrigger--category'、'listTrigger--tag'、'listTrigger--year'、'listTrigger--auther'をIteratorに入れておく。
２） forループで順次処理する。
というようにするのが素直だと思います。

コードは以下のような感じでしょう。

// イテラブルなオブジェクトである配列に、データを入れる。
  var anArray = ["listTrigger--category", "listTrigger--tag", "listTrigger--year","listTrigger--auther"];
 
// 配列を基にしてイテレータを作る
  var iterator = anArray[Symbol.iterator](); 

// for-of にイテレータを渡して、イテレータからデータを取り出しながら繰り返し処理をする。
  for(var v of iterator){
    const click = document.getElementsByClassName(v),
    on = document.getElementsByClassName(v + "On")
    plusAnimation(click,on)
  }; 

（注意）上記コードは動作確認をしていませんので、ミスタイプやバグが含まれているかもしれません。

Comments

[退会済みユーザー]

Iteratorを使う際の参考にさせて頂きます。
この度はありがとうございました。

Answer 3

意図がいまいちくみ取れませんでしたが、繰り返し処理をfor文などでまとめたいと解釈したうえで以下の回答いたします。

// 共通の接頭語の定義
var PREFIX = "listTrigger--";
// 共通の接尾語の定義
var EVENT_TARGET_SUFFIX = "On";
// plusAnimationを付けるターゲット定義の配列
var clickTargets = [
"category",
"tag",
"year",
"auther"
];

// 定義要素にplusAnimationを実行
for(var i = 0 ; i < clickTargets.length ; i = i+1){
  var targetStr  = clickTargets[i];
  var click = document.getElementsByClassName(PREFIX+targetStr),
  var on = document.getElementsByClassName(PREFIX+targetStr+EVENT_TARGET_SUFFIX)
  plusAnimation(click,on)
}

Comments

[退会済みユーザー]

Iteratorを使う際の参考にさせて頂きます。
この度はありがとうございました。