解決したいことは、以下のコードでスライドの要素をクリックすると、別要素にクラス付与をする記述が、
PCでは問題なく動作するのに、スマホではクリックしてもクラス付与がされません。
ご教授いただけますでしょうか。
$j('.infiniteslider-list li').each(function(e) { $j(this).bind('click', '.slick-slide', function() { $j('.item-slider-detail-layer:nth-child(' + (e + 1) + ')').addClass('active').siblings('.active').removeClass('active'); return false; }) })
タップでもクリックが正常に反応するコード
$j('.infiniteslider-list li').click(function(e) { var clazz = e.target.className; var num = clazz.slice(-1); $j('#detail-item' + num).addClass('active').siblings('.active').removeClass('active'); return false; });
HTML
<ul class="item-slider infiniteslider-list"> <li onClick=""><a href="#item1"><img src="http://via.placeholder.com/350x150" alt="" class="infinites-item1"></a></li> <li onClick=""><a href="#item2"><img src="http://via.placeholder.com/350x150" alt="" class="infinites-item2"></a></li> </ul> <div class="item-slider-detail"> <div id="detail-item1" class="item-slider-detail-layer"> キャプション </div> <div id="detail-item2" class="item-slider-detail-layer"> キャプション </div> </div>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。