複数画像のclassをremoveしたりaddしたりする方法

Question

前提・実現したいこと

画像に付与しているclass（画像をグレースケースにしている）をアクティブなときは正常な画像用のクラスで表示させたいです。

一枚の画像だと簡単に出来たのに、複数画像でAがアクティブならB以降はグレー、BがアクティブなときはAとC以降はグレーのようにループさせようとすると出来ませんでした。ご教授お願いいたします。

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

<div class="Wrap">
<div><img src="img/hoge1.jpg" class="item-gray" id="item1"></div>
<div><img src="img/hoge2.jpg" class="item-gray" id="item2"></div>
<div><img src="img/hoge3.jpg" class="item-gray" id="item3"></div>
<div><img src="img/hoge4.jpg" class="item-gray" id="item4"></div>
<div><img src="img/hoge5.jpg" class="item-gray" id="item5"></div>
<div><img src="img/hoge6.jpg" class="item-gray" id="item6"></div>
</div>

該当のソースコード

<script type="text/javascript">
(function () {
  var item0 = document.getElementById('item1');
  var item1 = document.getElementById('item2');
  var item2 = document.getElementById('item3');
  var item3 = document.getElementById('item4');
  var item4 = document.getElementById('item5');
  var item5 = document.getElementById('item6');
  var arrayItem = [
    item0,
    item1,
    item2,
	item3,
	item4,
	item5
  ];
  var i = 0;
  (function loop() {
    arrayItem[i].classList.add('item-gray');
    arrayItem[i].classList.remove('item-active');
    ++i;
    if (i === arrayItem.length) {
      i = 0;
    }
    arrayItem[i].classList.add('item-active');
    arrayItem[i].classList.remove('item-gray');
    setTimeout(loop, 6000);
  }) ();
}) ();
</script>

試したこと

過去の質問を見ながら、組み合わせてできるか挑戦しました。

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

初学者のため、変な書き方をしている箇所があるかもしれません。

Comments

[m.ts10806]

「アクティブなとき」というのが何を意味しているのかコードからは読み取れなかったのですが、どのように判定されているのでしょうか。

[yambejp]

clickなのかhover(mouseover)なのか他のなにかに依存するか提示して下さい

[ktktpan]

mts10806様 classをitem-grayのものが順番にitem-activeに変わって欲しい、というようなイメージなのですが。すみません、説明が下手で。

[ktktpan]

yambejp様 onclickやonmouseoverではなく、時間とともに順番にクラスがitem-activeに変わって、それ以外がitem-grayに戻るようなイメージです。伝わりづらく、申し訳ございません。

[m.ts10806]

順番に・・・。イルミネーションのような形を想定されていますでしょうか。

[ktktpan]

mts10806様 そうですね。item1がitem-activeの時は、それ以外がitem-grayで、item2がitem-activeになったらそれ以外がitem-grayで、という風に順番にクラスを変えるという処理をループさせたいイメージです。最後のitem6の次はまたitem1にitem-activeが追加されて、というような。分かりづらいですが。

Answer 1

実装イメージだけなので、読み替えてください。

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

.box{
 width:100px;    
 height:100px;
 border:1px solid #000;
}
.box.item-gray {
  background:#ccc;
}
.box.item-active{
  background:#f00;
}

var boxes = null;
var now = 0;
window.onload = function(){
    boxes = document.getElementsByClassName("box");
    setTimeout(il, 1000);
};

function il(){
    for(var i = 0;i<boxes.length;i++){
        boxes[i].classList.add("item-gray");
        boxes[i].classList.remove("item-active");
    }
    boxes[now].classList.add("item-active");
    now++;
    if(now > (boxes.length-1)){
        now = 0;
    }
    setTimeout(il, 1000);
}

idを振って固定化するより、グループ用のクラスを振ってそれに対して指定をしていった方が
数が増えてもコードが増えなくてすみます。

余談：
CSSだけでもできそうな気がします。
transitionとか着色のタイミングをずらして駆使したらいい感じかなと。

Comments

[ktktpan]

transitionでのタイミングをずらすなど、cssでの代替案や、アイテム数が増えた場合まで考慮に入れて回答してくださりありがとうございます。

Answer 2

こんなかんじですかね？

.item-gray{opacity:0.5}
.item-active{}

window.addEventListener('DOMContentLoaded', function(e){
  var imgs=document.querySelectorAll('.Wrap img');
  loop();
  setInterval(function(){loop()},1000*imgs.length);
  function loop(){
    [].forEach.call(imgs,function(x,y){
      setTimeout(function(){
        var n=(y==0?imgs.length:y)-1;
        imgs[n].classList.remove("item-active");
        imgs[n].classList.add("item-gray");
        x.classList.remove("item-gray");
        x.classList.add("item-active");
      },1000*y);
    });
  }
});

<div class="Wrap">
<div><img src="img/hoge1.jpg" class="item-gray" id="item1"></div>
<div><img src="img/hoge2.jpg" class="item-gray" id="item2"></div>
<div><img src="img/hoge3.jpg" class="item-gray" id="item3"></div>
<div><img src="img/hoge4.jpg" class="item-gray" id="item4"></div>
<div><img src="img/hoge5.jpg" class="item-gray" id="item5"></div>
<div><img src="img/hoge6.jpg" class="item-gray" id="item6"></div>
</div>

Comments

[ktktpan]

素早いご回答ありがとうございます。拙い日本語から解読していただきありがとうございます。