クリックで画像をループさせる箇所が複数あっても動くようにしたい。

各商品毎に数枚の画像があります。
Aの商品に4枚の商品画像
Bの商品に3枚の商品画像
Cの商品に1枚の商品画像…

各商品画像をクリックすると、その商品画像が切り替わります。
Aの商品画像をクリックし画像を4枚目まで表示させた後、さらにクリックすると1枚目に戻る
というところまではできました。

その後、B、Cと画像を入れ、Aの商品画像をクリックした後に他の商品画像をクリックすると
画像がうまく切り替わりません。

■HTML

Aの商品画像
<figure class="item_img">
    <span>
        <img src="img/a_img01.jpg" alt="" class="ac_img">
        <img src="img/a_img02.jpg" alt="">
        <img src="img/a_img03.jpg" alt="">
        <img src="img/a_img04.jpg" alt="">
    </span>
</figure>
Bの商品画像
<figure class="item_img">
    <span>
        <img src="img/b_img01.jpg" alt="" class="ac_img">
        <img src="img/b_img02.jpg" alt="">
        <img src="img/b_img03.jpg" alt="">
    </span>
</figure>
Cの商品画像
<figure class="item_img">
    <span>
        <img src="img/c_img01.jpg" alt="" class="ac_img">
    </span>
</figure>

■JS

<script>
    $(function(){
        var count = -1;
        $('.item_img > span').on('click' , function(){
            var total = $(this).find('img').length;
            if(total  != 1){
                var total = total - 1;
                count ++;
                if ( count == total ){
                    $(this).find('img').eq(count).removeClass('ac_img');
                    count = 0;
                    $(this).find('img').eq(count).addClass('ac_img');
                    count = -1;
                } else{
                    $(this).find('img').eq(count).removeClass('ac_img').next().addClass('ac_img');
                }
            }
        });
    });
</script>

■css

.item_img .ac_img {
    display: block;
}

.icon_switch span {
    position: relative;
    display: block;
}

.icon_switch figure span::after {
    content: '';
    display: inline-block;
    width: calc( 70 / 340 * 100% );
    padding-bottom: calc( 70 / 340 * 100% );
    background-image: url(../img/ico_hads.png);
    background-size: contain;
    vertical-align: middle;
    position: absolute;
    bottom: 0;
    right: 0;
}

原因は、最初にクリックした商品画像以外の商品画像をクリックしたときに
countの値が0にならないせいだと思いますが、
どうやったら0にできるかがわかりません。

ご教授よろしくお願い致します。

m.ts10806

2018/05/11 12:54

htmlとjsのコードブロックはわけてもらえますか？冒頭を ```js ```html のように言語名を入れると適切にハイライトさせれます。addClassなどでclassを与えているようですが、念のため対応するcssもご提示願います。

kusaka00

2018/05/12 09:31

御連絡がおそくなりまして、申し訳ありません。ご指摘の内容を反映させていただきました。宜しくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

こうしてみるとかどうでしょう。

JavaScript
1$(function(){
2	$('.item_img > span').each( function(){
3		var count = -1;
4		$(this).on('click' , function(){
5			var total = $(this).find('img').length;
6			if(total  != 1){
7				var total = total - 1;
8				count ++;
9				if ( count == total ){
10					$(this).find('img').eq(count).removeClass('ac_img');
11					count = 0;
12					$(this).find('img').eq(count).addClass('ac_img');
13					count = -1;
14				} else{
15					$(this).find('img').eq(count).removeClass('ac_img').next().addClass('ac_img');
16				}
17			}
18		});
19	});
20});